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

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

1、矢量标注

2、聚合标注

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

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

1、加载覆盖层

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

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

OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers实现访问地理空间数据的方法都符合行业标准。比如OpenGIS的WMS和WFS规范。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OpenLayers提供了非常多的选择。 从OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发，Rico用到地方不多，只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。OpenLayers2.4版本以后提供了矢量画图功能，方便动态地展现“点、线和面”这样的地理数据。 OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问. OpenLayers 支持的地图来源包括Google Maps、Yahoo! Map、微软Virtual Earth 等。用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加。除此之外，OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。 在 *** 作方面，OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用 *** 作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的 *** 作。甚至可以对已有的OpenLayers *** 作和数据支持类型进行扩充，为其赋予更多的功能。例如，它可以为OpenLayers 添加网络处理服务WPS 的 *** 作接口，从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。同时，在OpenLayers提供的类库当中，它还使用了类库Prototype.js 和Rico 中的部分组件，为地图浏览 *** 作客户端增加Ajax 效果。

这里主要介绍矢量切片图层在 Openlayers 中的应用，这里以加载 mapbox 样式图层为例来说明矢量切片图层的使用。例子中使用的是 OpenStreetMap 的街道数据，将提供免费的数据，但需要在官网申请一个 key 。进入 OpenStreetMap 的 官方文档 ,可以查看获取 key 的相关信息。

使用矢量切片图层跟使用其它图层的方法差不多，首先就是引入相关的类，如下所示：

然后再创建相关的图层：

加载图层后的效果图如下所示：

MVT 为 Mapbox Vector Tiles 的缩写，表示数据来源格式采用的是 Mapbox 的矢量切片，加载地图时，将以切片的方式来加载数据，切片大小默认为 512 x 512 。

由于矢量地图的数据是保存在客户端的，但保存数据仅仅是一些渲染相关的，还有可以获取到 geometries ，我们就可以利用这一点来对地图做一起交互，这里做一个示例，当鼠标移动时，在鼠标移动所处的位置根据 geometries 来绘制一个矩形。

首先为地图添加一个 pointermove 事件，然后再使用 forEachFeatureAtPixel 来获取当前点关联的要素，在将 geometry 添加到矢量图层上。效果如下所示：

---