Gis 之OpenLayers入门简介

OpenLayers（openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。

API 文档： https://openlayers.org/en/latest/apidoc/

例子： https://openlayers.org/en/latest/examples/

要想在浏览器中显示交互式的地图很难，因为浏览器默认的只是显示静态的图片，如PNG、JPEG等格式，要交互式很难，因为每一个点击和缩放，地图都要做出正确的反应。

OpenLayers是一个JavaScript 类库包，主要是用于开发Web GIS客户端。这就是说，要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源，根据其提供的功能接口，直接调用。所以关键是了解其提供的接口，这是使用一个类库的关键！如果想要优化相应的功能或者定制化，就要深入地了解其实现细节了，这需要有熟练的JavaScript功底。

OpenLayers支持Google Maps、Yahoo Map、微软Virtual Earth等资源，可以通过WMS服务调用其它服务器上的空间数据，通过WFS服务调用空间服务。在操作方面，OpenLayers 除了可以在浏览器中实现地图浏览的基本效果，如放大、缩小、平移等操作，进行选取面、选取线、要素选择、图层叠加等操作。

有如下特点：

支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务
支持瓦片图层，来源OSM, Bing, MapBox, Stamen, MapQuest,或者其他 XYZ 数据源。支持 OGC 绘制服务，以及非瓦块图层
可借助 WebGL, Canvas 2D, 等所有HTML5优势进行渲染. 直接用CSS控制map风格
支持矢量切片，包括pbf、GeoJSON、TopoJSON格式
支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据
支持OGC制定的WMS、WFS等GIS网络服务规范
支持在移动设备上运行,构建轻量级自定义组件配置
可以通过css来为地图控件设置样式
面向对象开发方式，在OpenLayers中万物皆对象

Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图的加载与其相关操作。

在OpenLayers的体系框架中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并且由地图视图（View）控制地图表现。地图容器上还支持一些与用户交互的控件（Control和Interaction），另外，OpenLayers还支持事件机制。

1）Target 属性：

首先，大家也注意到了，代码中，new 出的 map 对象要渲染到页面上，需要绑定一个容器，也就是代码注释的挂载点 target 属性，通过这个属性，地图就可以在 render 的时候，渲染到页面上，这里注意，你的容器要是不设置宽高的话，你的地图怕是看不到哟。

那么，target 到底可以接收什么样的参数？
来看，来自官方 API 的解释：

target   **HTMLElement | string**
The container for the map, either the element itself or the id of the element. If not specified at construction time, module:ol/Map~Map#setTarget must be called for the map to be rendered.

明白了？简单的说就是要么给 target 传一个 HTMLElement，要么给它一个节点的 id。

2）layers 属性：

接下来，来看 map 对象属性 layers，它是 map 地图上要展示的图层，这个就牛批了。你所看到的地图或者地图上展示的点啊、线啊、或者其他花里胡哨的样式，都是源于 layers。

layers 接收的是一个 layer 集合，也就是一个数组。那么，一个重要的关系需要说明了：一个 map 对象对应多个 layer 图层，一个 layer 图层对应一个 source 资源。

所谓的 source，就是图层的资源。图层要展示内容，需要将要素 feature 添加到 source。

示例中的 layer 是一个瓦片图层（tileLayer），经常用到的图层类型还有 VectorLayer 和 ImageLayer。
当然，选择什么样的图层类型，也要结合实际应用以及后台提供的地图服务来决定。

不同类型的图层，拥有的属性也不完全相同，但有些常用的属性一致，比如：

className（图层类名，常用来标识图层，可以作为图层过滤条件）；
source（图层资源，存放图层展示的要素 feature）；
visible（显示状态，可以用于图层切换控件，控制图层显示状态）；
zIndex（图层渲染位置，控制图层显示的顺序，或者说多个图层叠加时，图层的位置）；
extent（图层视角，控制地图展示的视角，[minx, miny, maxx, maxy]）等。

3）View 属性：

view 属性用来控制地图展示的中心位置、放大倍数、坐标参考系、视角等属性。
示例代码只添加了 center 中心和 zoom 放大倍数两个参数。center 中的 fromLonLat() 方法用来转换投影坐标系。来看一个比较详细 view 示例：

view: new View({// 地图中心经纬度坐标center: [120.6, 36.2],// 默认地图放大倍数zoom: 28,// 地图最小放大倍数minZoom: 20,// 地图最大放大倍数maxZoom: 36,// 投影坐标系，默认EPSG:'3857'projection: new Projection({code: 'EPSG:4326',units: 'm',  }),// 地图视角extent: [119.9440044999051, 35.784494675002925, 121.2790759907966, 36.56676312669716],}),

说明：地图的投影坐标系有很多，这里具体用什么参考坐标系，需要根据地图服务来定。

Map、View、controls、interaction 之间关系：

ol/Map
视图： getView、setView
图层： getLayers、getLayerGroup、addLayer、removeLayer、setLayers、setLayerGroup
控件： addControl、removeControl、getControls
交互： addInteraction、removeInteraction
DOM：getTarget、getTargetElement、setTarget

Map

主体地图对象 new Map()

controls类型

比例尺 ScaleLine

默认演示

new ScaleLine()

配置样式

new ScaleLine({bar: true,

minWidth: 128,

units: ‘metric’}),