openlayers基础知识和常规操作

官网地址：openlayers.org/ 中文相关资料链接和参考资料：

layer 是各种图层的基类，只用于让子类型继承和实现，一般自身不会实例化。主要有 WebGLPoints Layer、热力图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer) 和 矢量图层(Vector Layer) 五种类型。主要功能是对矢量数据和栅格数据的可视化。图层渲染结果的样式，主要与数据渲染方式有关，与数据源关系不大。

openlayers的图层主要分为两类：Vector（矢量）和Raster（栅格），矢量图层是指在渲染发生在浏览器的图层，source返回的数据类型是矢量，如geojson的坐标串；栅格图层则是由服务器渲染，返回到浏览器的是一张张的瓦片图片，栅格图层主要是展示。 矢量图层类型有：

栅格图层类型较为简单，只有Tile图层。 各种图层详细介绍： WebGLPoint Layer：对于海量数据的个性化渲染也成为了可能，WebGLPoint Layer的style也变成了一个非常实用的功能。 Heatmap Layer：将矢量数据渲染成热度图的类，继承了 ol.layer.Vector 类，ol.layer.Vector 继承了ol.layer.Layer 类， 额外的参数是 olx.layer.HeatmapOptions blur 控制圆点的边缘，对边缘做模糊化； radius 则规定了圆点的半径

Image Layer：主要是指服务器端渲染的图像，可能是已经渲染好的图像，或者是每一次请求，都根据请求内容定制化地生成一幅图片，该图层类型支持任意的范围和分辨率。

Tile Layer：切片地图是比较常用的图层类型，切片的概念，就是利用网格将一幅地图切成大小相等的小正方形 Vector Layer：即矢量图层，矢量图层实际上是在客户端渲染的图层类型，服务器返回的数据或者文件会通过 OpenLayers 进行渲染，得到相应的矢量图层。vectorlayer 相对于其他类型的图层，还包含了一个 style 参数，这个参数便是控制矢量图层的外观样式的，style 是一个 ol.style.Style 类型。

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。 source 是 layer 中必须的选项，定义着地图数据的来源，与数据有关的函数，如addfeature、getfeature等函数都定义在 source 中，而且数据源支持多种格式。

以下介绍主要基于ol.source.Vector

包含四个事件，addfeature，changefeature，clear，removefeature。

features 方法：假如有一个包含空间数据的字符串，geojsonObject，是GeoJSON字符串格式，那么可以用来初始化一个图层。

url + format 方法：如果有一个文件作为数据源，那么可以配置 url 属性来加载数据

这两种方法中都会指定数据来源格式， 矢量数据源支持的格式包含很多：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。这些格式都有**readFeatures **、**readFeature 和readGeometry **方法用于读取数据。

地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation 类，它定义了用户与地图进行交互的基本要素和事件。

interaction defaults - 默认添加的交互功能 默认添加的交互包括： DragRotate, DragZoom, DoubleClickZoom, PinchRotate, PinchZoom, DragPan, KeyboardZoom, KeyboardPan, MouseWheelZoom

draw interaction - 绘图功能 绘图交互允许绘制几何地理要素，可选参数为一个对象,包含以下属性。

dragrotateandzoom interaction - 鼠标拖拽进行缩放和旋转地图

dragbox interaction - 拉框交互 draganddrop interaction - 拖拽文件到地图 将空间数据使用鼠标或者手指拖拽到地图中，解析成一个图层添加到地图中。目前只支持矢量数据，未来可能支持更多的空间数据格式。目前，支持的格式包括 GeoJSON, GML, KML, GPX, OSMXML, TopoJSON 和 IGC。

keyboard interaction - 键盘交互功能 modify 和 select interaction select 就像名字暗示的一样，是用来选中要素的；而 modify 是修改要素的，主要是通过拖拽方式修改点的坐标。

pinchrotate ，pinchzoom interaction - 两个手指缩放和旋转地图 pointer interaction - 自定义鼠标事件 针对鼠标的行为按下（Down）、移动（Move）和抬起（Up），自定义事件。这三个事件发生有先后顺序，首先是触发按下，之后是移动事件，最后是抬起事件。只要配置相关的属性，包含handleDownEvent，handleDragEvent，handleMoveEvent，handleUpEvent分别对应鼠标的 down、drag、move和up四种事件。

snap interaction - 鼠标捕捉 当修改和绘制矢量要素时，鼠标距离某个要素一定距离之内，自动吸附到要素。

OpenLayers 中包含的控件有：

调整控件样式的两种方法： 1.** 修改控件的可选参数的默认值**

2.覆盖默认样式- 在自己的 CSS 样式表中添加如下代码（因为自己的CSS文件样式优先级比外部链接引入的样式优先级高）

初始化一幅地图，必备的三要素之一就是视图（view），这个对象主要是控制地图与人的交互，如进行缩放，调节分辨率、地图的旋转等控制。

地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。 矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层，重新渲染，否则动态样式不生效。 样式主要针对矢量图层数据，既可以配置一个全局的样式，也可以针对每个feature单独配置；既可以应用统一的样式，也可以根据要素和分辨率应用条件样式。样式应用是非常灵活的。

一般与 image 样式配合使用，表示 image 放置的位置

配置图层的要素的填充颜色和透明度

样式主要针对矢量图层（vector layer），矢量图层中包含一个或多个要素（feature），要素中包含一个地理属性（geometry）表示地理位置，还可能包含一个或多个其他属性，比如要素的名称、类型等等，要素可以使用单独的样式，这时候要使用 feature.setStyle(ol.style.Style) 来设置单独使用的样式，否则直接继承矢量图层的样式

条件样式是将样式配置为一个回调函数，其参数包含要素本身和分辨率，可以根据要素本身的属性和地图的分辨率，显示动态的样式，形式如 style: function(feature, resolution) {}。 例如，以下代码段配置当分辨率小于 5000 时候，在要素上显示一个标签，标识要素名称：

矢量图层是在客户端渲染的，在 web 环境中，对应的就是浏览器。构成一个矢量图层的包含一个数据（source）和一个样式（style），数据构成矢量图层的要素，样式规定要素显示的方式和外观。一个初始化成功的矢量图层包含一个到多个要素（feature），每个要素由地理属性（geometry）和多个其他的属性，可能包含名称等。结构如下图：

在初始化矢量图层时，可以有很多选项配置矢量图层的行为和外观，常用的有：

取得要素 vector 的数据包含在 source 中，要取得 vector 的 feature 数据，要在 source 中，例如 vector.getSource().getFeatures()，该函数会返回一个 feature array，直接使用 [ ]，取用即可，或者根据要素的 ID 取得（getFeatureById()）。 取得要素的 geometry 利用 getGeometry() 可以获得要素的地理属性，这个函数当然返回要素包含的 geometry，geometry 包含很多类型，主要有 point、multi point、linear ring、line string、multi line string、polygon、multi polygon、circle。 取得 geometry 后，就可以获得要素的坐标了，可以根据坐标做一些地理判断，比如判断 一个坐标是否位于要素内（containsCoordinate(coordinate) 或者 containsXY(x, y)），取得要素的中心坐标等。

主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是 HTML 元素，利用 overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用 overlay 都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了 overlay。

WFS服务，可以通过OL进行加载，加载有简单方式也有GetFeature方式，该种方式自由度更大，可以结合一些过滤条件，这样一方面可以提高加载数据的效率。

优点：可以直接对元素进行css处理

在feature上应用了styleFunction，通过官网API文档可以看到，其类型为ol.FeatureStyleFunction，函数仅带有一个参数resolution，在上面的代码中看到了，在函数体内this指的是当前的feature

该函数具有两个参数，第一个参数为feature，第二个参数为resolution，同样地，该函数需要返回style数组。

如果图标不进行交互，可以把图标渲染到底图上。

在应用大量图标的时候，其实图标样式差异化并不大，比如快餐店，公共厕所，公交站点等等有很多，但都是用同样的图标在地图上标准，在不注意的时候，我们是采用下面的方式来添加图标的：

用一个大的canvas来绘制多个图标，这样就能减少canvas的数量，从而提高效率

You clicked here:

注意：在singleclick和dblclick响应之前，都会触发click事件，在选择事件时，需要谨慎考虑。 同时发现moveend事件在地图缩放的时候，也会触发。

注意事件名称是可以自定义的，只要派发和监听使用的事件名称是一致的就可以。除了可以通过dispatchEvent({type: 'mousemove', event: event})这种形式派发一个事件之外，还可以通过dispatchEvent('mousemove')这中形式直接发送mousemove事件

feature的样式优先级是大于layer的样式的优先级