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

た入场券 2022-10-19 05:58 772阅读 0赞

# 场景 #

Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118492511][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118492511]

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

实现效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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);
                });
            }

注意：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

[https://openlayers.org/en/latest/apidoc/][https_openlayers.org_en_latest_apidoc]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118492511]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/1aff7217cda941109e56583b82e9abf8.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221005/ce2302f01cf24c7c80bb907c4f65d33e.png
[https_openlayers.org_en_latest_apidoc]: https://openlayers.org/en/latest/apidoc/