本博客合集是我的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);
});
