openlayers ​

• 官网
• v4.6.5
• GitHub

1. 特性 ​

1.1 支持瓦片图层 ​

OpenLayers支持从OSM、Bing、MapBox、Stamen和其他任何你能找到的XYZ瓦片资源中提取地图瓦片并在前端展示。同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务。

1.2 支持矢量切片 ​

OpenLayers也支持矢量切片的访问和展示，包括MapBox矢量切片中的pbf格式，或者GeoJSON格式和TopoJSON格式的矢量切片。

1.3 支持矢量图层 ​

能够渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据，上面说的矢量切片形式的数据也可以被认为是在矢量图层中渲染。

1.4 支持OGC规范 ​

OpenLayers支持OGC制定的WMS、WFS等GIS网络服务规范。

1.5 运用前沿技术 ​

利用Canvas 2D、WebGL以及HTML5中其他最新的技术来构建功能。同时支持在移动设备上运行。

1.6 易于定制和扩展 ​

可以直接调整CSS来为地图控件设计样式。而且可以对接到不同层级的API进行功能扩展，或者使用第三方库来定制和扩展。

1.7 面向对象的思想 ​

最新版本的OpenLayers采用纯面向对象的ECMA Script 6进行开发，可以说，在OpenLayers中万物皆对象。

1.8 优秀的交互体验 ​

OpenLayers实现了类似于Ajax的无刷新功能，可以结合很多优秀的JavaScript功能插件，带给用户更多丰富的交互体验。

2. 引用 ​

Openlayers的引用方式有两种，一种是通过script和link标签，引入其需要的文件。

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

另外一种方式是通过npm的方式引入。这是在使用框架时最常用的引用方法，如Vue/React等，在框架中也可以使用第一种方式引入，但更推荐使用这种方法。这种方法引用是从npm仓库中引入框架包，在vue或React框架中，更方面我们进行一些包的管理。

# 安装依赖
npm install ol -S

先通过上述命令安装依赖，再引入：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';

3. 核心类 ​

Openlayers中有很多核心的类，我们结合官方文档和GitHub上的源码，对Openlayers中类之间的关系、和类的继承做了一个概要说明，如下图所示。其中：

3.1 Map ​

Map (ol/Map)是Openlayers中最主要的核心组件，它渲染在一个目标(target)容器中（例如页面中的一个div），所有的地图属性都可以在定义的时候初始化，同时也提供了setter方法让我们修改map的属性，例如通过setTarget()可以改变地图的装载容器。

3.2 View ​

View(ol/View)是Openlayers中非常重要的一个概念，其控制了地图视觉相关的参数，如地图中心、初始化级别、缩放级别等。同时，view还定义了地图的投影，决定了地图中心点的坐标、单位以及地图渲染的分辨率等参数，默认是EPSG:3857。

3.3 Source ​

Source即数据源，Openlayers中支持多种免费或商业的地图切片服务，如OSM、天地图等，也支持OGC服务，如WMS、WMTS等，也可选择矢量格式数据如GeoJSON、KML格式等。

3.4 Layer ​

数据源最终都会以图层的方式呈现出来，一个数据源可以被多次使用，并以不同的样式展示。但是，这些图层所使用的数据源都为同一个。Openlayers中图层及各图层类之间、图层和数据源之间的关系如下图所示。

3.5 Controls ​

是地图控件相关，其需要一个容器来呈现跟地图相关的状态或者交互相关的操作。

3.6 Interaction ​

地图交互相关，如双击放大地图、鼠标滚轮缩放地图等，是地图默认的交互，同时也提供一些矢量操作相关的交互，如绘制、选择等。Openlayers中的交互分为两种：默认交互和矢量交互。交互的种类如下图所示，其中后面打“√”的是默认交互。

3.7 Overlay ​

Overlay是一个覆盖在地图上一个浮动的div，其位置跟地图是相对的，会随着地图的拖动而变化其位置。

3.8 Style ​

Style用来设置矢量要素图层的渲染样式，其中：

• image为点样式，一般为一个图标或带颜色的填充图形；
• stroke为边框样式，线的样式、多边形的边框样式等通过它来设置；
• fill为填充样式，多边形的填充样式通过它来设置；
• text为文本标注样式。

3.9 Projection ​

3.9.1 proj方法 ​

Openlayers中proj提供了坐标定义或坐标转化等方法:

3.9.2 ol.proj.Projection ​

定义投影，其配置参数与说明如下表。

var projection = new ol.proj.Projection({ // 定义平面坐标系
    code: 'xkcd-image',
    units: 'pixels',
    extent: extent
});

proj4.defs( // 通过proj4定义code为3395的坐标系
    'EPSG:3395',
    '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'
);