openlayers添加标注(含聚合标注)、覆盖物、绘制路线

通常需要在地图上标注出一些景点、建筑或者公共设施，可以选择使用矢量标注或者聚合标注。openlayers 添加矢量标注的原理是将标注添加到一个新建的矢量层上，再将矢量层添加到地图上叠加显示；聚合标注的原理同上，但它适用于标注的数据量非常大的场景，随着层级的放大，会展示更多的标注，缩小时，则将标注聚合显示，能够在大量加载标注时提高渲染性能。

1、矢量标注

2、聚合标注

openlayers 可以创建一个 Overlay 覆盖层，这个覆盖层能够展示自己写的 html 内容，从而实现添加各种所需的覆盖物。也可以通过这个方法来添加标注，但覆盖层添加的覆盖物会影响地图的拖动（即在覆盖物上进行滑动 *** 作时地图无法响应，虽然可以通过设置 stopEvent 将滑动事件传递到地图上，但这样会导致在IOS端的覆盖物无法进行点击 *** 作）。

因此如果要添加可以点击并且不影响地图拖动的标注时，建议使用矢量层标注，而如果要展示自定义的一些内容，如点击地图d出对话信息框、地图上的自定义按钮等则使用覆盖层更加合适。

1、加载覆盖层

2、添加地图点击监听事件

原理大致与添加矢量标注相同，都是添加在矢量图层上，不过这里添加的是线对象。

注 ：一般情况下我用的最多的是"moveend"事件，为什么呢，有些时候请求的数据太多，几万甚至几十万几百万，这个时候不可能是把这些数据全部渲染到地图上，那么我们只需要渲染当前屏幕的数据就可以，也就是按需加载，移动完成一次就请求一次当前屏幕的数据渲染。

参考资料：

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

绘图人员绘制完地图并配准后，发布到 GeoServer（一款基于 java 的开源 GIS 工具集），需在 GeoServer 上设置好投影坐标系（EPSG:3857即墨卡托坐标系，EPSG:4326即WGS84坐标系）、地图瓦片格式、坐标轴范围、地图原点、地图层级、分辨率等参数，一般由后台人员设置。

1、项目引入 openlayers

首先npm 安装 openlayers

注意，在 vue 中必须逐一声明所需的 openlayers 库的对象和方法才能正常使用

2、加载手绘地图

手绘地图以 WMTS （Web Map Tile Service, Web 地图瓦片形式）加载，先创建一个类型为 WMTS 的图层资源，再将其放入创建的 Map 对象的图层资源集合中。

以上，实现加载手绘地图后，移动至指定经纬度。

这样就完成了手绘地图底图的加载，后续如何为地图添加标注（含聚合标注）、覆盖物及路线等，可以查看我的另一篇文章： https://www.jianshu.com/p/4af2a52a0fc6

---