Openlayers中實現地圖上打點並顯示圖標和文字

場景

Openlayers中加載Geoserver切割的EPSG:900913離線瓦片地圖並顯示：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511

在上面顯示地圖的基礎上，怎樣在地圖上添加點，並且顯示圖標和文字信息。

實現效果如下

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先要添加多個的話，需要定義每個的坐標和要顯示的文字數據源

        //打點數據源
        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/