Gis 之OpenLayers入门简介

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 除了可以在浏览器中实现地图浏览的基本效果，如放大、缩小、平移等操作，进行选取面、选取线、要素选择、图层叠加等操作。

有如下特点：

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