OpenLayers 地图标注之图文标注

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图标注是将空间位置信息点与地图关联、通过图标、窗口等形式把相关信息展现到地图上。在WebGIS中地图标注是重要的功能之一，可以为用户提供个性化服务，如兴趣点等。地图标注表现方式有图文标注、Popup标注、聚合标注等。本节主要介绍加载图文标注。

1. 地图标注基本原理

地图标注通过在已知坐标点添加图片、文字或者图文的方式展现内容信息。可以通过鼠标点击获取目标点位置坐标，也可以通过属性传递获取。

2. 加载地图标注

OpenLayers地图标注由叠加类Overlay实现，主要内容参数为HTMLElement。示例通过document.createElement创建标注内容。

const htmlEle = document.createElement("div")
const closeEle = document.createElement('span')
const mainEle = document.createElement('div')

mainEle.className = 'ol-popup-main'
mainEle.textContent = "这是四川省"

closeEle.textContent = "x"
closeEle.className = "ol-popup-close"
htmlEle.className = "ol-popup"

htmlEle.appendChild(mainEle)
htmlEle.appendChild(closeEle)

通过map.addOverlay加载地图标注。

const marker = new ol.Overlay({
    id: "maker",
    position: chengdu,
    element: htmlEle,
    offset: [0, -70], // x、y轴偏移量，正值向右向下，负值相反
    positioning: 'top-center', // 定位方式，顶部居中
    aotuPan: true,
    autoPanMargin: 1.25,
})
marker.setProperties({ layerName: 'overlay' }) // 设置标注图层属性
map.addOverlay(marker)

3. 移除标注图层

可以根据图层名称或者传入标注图层进行移除。

function removeOverlayByName(layerName) {
    const overlays = map.getOverlays().getArray()
    // console.log("overlays:", overlays)
    overlays.forEach(layer => {
        console.log("layer.layerName：", layer.get('layerName'))
        if (layer.get('layerName') === layerName) map.removeOverlay(layer)
    });
}
function removeOverlayByLayer(overlay) {
    map.removeOverlay(overlay)
}

4. 打开和关闭Popup

OpenLayers中可以通过map.addOverlay实现Popup弹窗，在弹窗关闭之后，通过添加交互事件，在地图上点击目标要素打开Popup。Select类用于图层要素交互，可以通过Select.getFeatures()方法获取被选择的要素。

function openPopup(overlay) {
  map.addOverlay(overlay)
}

function selectFeature(layer) {
    const selectEvt = new ol.interaction.Select({
        layers: [layer], // 用于选择要素的图层
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: 'yellow'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red'
                })
            })
        })
    })
    // 激活选择事件
    selectEvt.setActive(true)
    map.addInteraction(selectEvt)
    map.on('click', evt => {
        console.log("getLayers:", map.getLayers().getArray())
        const layers = map.getLayers().getArray()
        layers.forEach(layer => {
            const props = layer.getProperties()
            if (props.layerName === "pointLayer") {
                openPopup(marker)
            }
        })
    })
}

5. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !