3-三种常见的Overlay用法

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡

ol.Overlay有三种常用用法：

显示标记
显示文本（或链接）
气泡弹窗

本文实现了，在沧州市的位置，显示一个正方形div标签、一个写有“沧州市”a标签和上一节实现的气泡弹窗，效果如下

ol.Overlay用于显示标记时，将element元素指向html空标签，在地图上层显示。

ol.Overlay用于显示文本（或链接）时，将element元素指向带有文本（或链接）的html标签，在地图上层显示。

引入ol文件

<link rel="stylesheet" href="../include/ol.css" type="text/css">
<script src="../include/ol.js"></script>

定义地图容器map、div标签marker、a标签text和弹窗popup。

<div id="map" class="map"></div>
<div>
    <div id="marker"></div>
    <a id="text" target="_blank" href="https://baike.baidu.com/item/沧州/107238?fromtitle=%E6%B2%A7%E5%B7%9E%E5%B8%82&fromid=4154796&fr=aladdin">沧州市</a>
    <div id="popup"></div>
</div>

设置样式

#marker {
    width: 20px;
    height: 20px;
    border: 1px solid #088;
    background-color: #0ff;
    opacity: 0.5;
}

#text {
    text-decoration: none;
    color: white;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: black 0.1em 0.1em 0.2em;
}

#popup {
    border: 1px solid black;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
}

js逻辑

//创建ol.Map对象
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: "map",
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

//定义沧州市的伪墨卡托坐标
var pos = ol.proj.fromLonLat([116.828613, 38.320111]);

//定义marker的ol.Overlay对象，并添加到map对象中
var marker = new ol.Overlay({
    element: document.getElementById("marker"),
    position: pos,
    positioning: "center-center",
    stopEvent: false
});
map.addOverlay(marker);

//定义text的ol.Overlay对象，并添加到map对象中
var text = new ol.Overlay({
    element: document.getElementById("text")
    position: pos,
});
map.addOverlay(text);

//定义popup的ol.Overlay对象，并添加到map对象中
var popup = new ol.Overlay({
    element: document.getElementById("popup")
});
map.addOverlay(popup);

//地图的单击事件，弹窗显示坐标
map.on("singleclick", function(evt) {
    //获取点击处的伪墨卡托坐标
    var coordinate = evt.coordinate;
    //将伪墨卡托坐标转换成可读的HDMS格式
    var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
    //设置弹窗的显示内容
    document.getElementById("popup").innerHTML = "<p>你点击了这里:</p><code>" + hdms + "</code>";
    //设置弹窗的弹出位置
    popup.setPosition(coordinate);
});