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

一、加载矢量标注及聚合标注

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

1、矢量标注

矢量标注.png

// 引入的对象和方法

import Vectors from 'ol/layer/Vector.js'

import { WMTS, Vector } from 'ol/source.js'

import Feature from 'ol/Feature'

import OlGeomPoint from 'ol/geom/Point'

import OlStyleStyle from 'ol/style/Style'

import OlStyleIcon from 'ol/style/Icon'

import Text from 'ol/style/Text'

import Fill from 'ol/style/Fill'

/*创建矢量标注

*@param{object} data 标注的数据

*/

createLabel(data) {

// 初始化标签要素

let feature = new Feature({

geometry: new OlGeomPoint(fromLonLat([+data.lng, +data.lat])), // 标签位置

name: data.name, // 标注显示的文字

img: require('./../../assets/imgs/map_icon_location.png'), // 标注显示的logo图片

})

feature.setId(data.id) // 设置ID

feature.setStyle(this.createLabelStyle(feature)) // 设置标注样式

let source = new Vector({}) // 初始化矢量数据源

source.addFeature(feature) // 将标签要素添加至矢量数据源

let layer = new Vectors({ // 创建矢量图层

source: source

})

this.map.addLayer(layer) // 将矢量图层添加至地图

}

/*创建标注样式

*@param{object} feature 标注要素

*@return {object} 返回创建的标注样式对象

*/

createLabelStyle(feature) {

//返回一个样式

return new OlStyleStyle({

//图标样式

image: new OlStyleIcon({