Openlayers中实现地图上打点并显示图标和文字

场景

在上面显示地图的基础上，怎样在地图上添加点，并且显示图标和文字信息。

实现效果如下

 

注：

关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

实现

首先要添加多个的话，需要定义每个的坐标和要显示的文字数据源

//打点数据源 var wrnameData = [{ x: '-11561016.25956459', y: '5542204.803284118', wrname: '公众号' }, { x: '-11562479.441174088', y: '5540478.999423137', wrname: '霸道的程序猿' } ];

然后新建一个打点的图层

// 打点图标的图层 var pointLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [] }) })

source的features先不赋值，后面循环数据源进行赋值。

然后在map中加上此图层

//Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。 var map = new ol.Map({ layers: [layer, lineVector, pointLayer], target: 'map', view: view });

然后最主要的就是调用和实现图标文字打点的方法

//调用打点方法 this.drawPoint(); /** * 图标文字打点 * */ function drawPoint() { this.wrnameData.forEach((item, index) => { var feature = new ol.Feature({ geometry: new ol.geom.Point([Number(item.x), Number(item.y)]) }) let style = new ol.style.Style({ image: new ol.style.Icon({ scale: 0.8, src: './icon/house.png', anchor: [0.48, 0.52] }), text: new ol.style.Text({ font: 'normal 12px 黑体', // // 对其方式 textAlign: 'center', // 基准线 textBaseline: 'middle', offsetY: -35, offsetX: 0, backgroundFill: new ol.style.Stroke({ color: 'rgba(0,0,255,0.7)', }), // 文本填充样式 fill: new ol.style.Fill({ color: 'rgba(236,218,20,1)' }), padding: [5, 5, 5, 5], text: `${item.wrname}`, }) }) feature.setStyle(style); this.pointLayer.getSource().addFeature(feature); }); }

注意：

需要一个图标文件，图标文件的路径为

 

以上接口的具体说明可以参考:

​​https://openlayers.org/en/latest/apidoc/​​