本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡
本节实现了一个简单的气泡弹窗，点击地图上任意一个位置，弹窗显示该点的坐标。
本节除了地图容器map外，还需要一个弹窗容器popup，用于在html中显示弹窗。本节用到的数据结构如下
ol.Overlay对象用于创建弹窗，显示在地图之上。
- 引入openlayers的css和js文件。
<link rel="stylesheet" href="../include/ol.css" type="text/css">
<script src="../include/ol.js"></script>
- 创建一个存放地图的容器map和弹窗容器popup。
<div id="map"></div>
<div id="popup" style="border: 1px solid black;background-color: white;border-radius: 5px;padding: 10px;">
<div id="popup-content"></div>
</div>
- js代码实现：
//获取弹窗和弹窗内容的dom对象
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
//创建一个Overlay叠加层对象用作显示弹窗
var overlay = new ol.Overlay({
//绑定id为popup的dom元素
element: container,
//autoPan参数：鼠标点击到浏览器窗口边缘，弹窗显示不全时，地图自动滚动
autoPan: true,
//autoPanAnimation参数：地图自动滚动的动画，持续250ms
autoPanAnimation: {
duration: 250
}
});
//新建地图对象
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
}),
//overlays指向ol.Overlay对象集合
overlays: [overlay]
});
//监听地图的鼠标单击事件
map.on("singleclick", function(evt) {
//获取点击处的伪墨卡托坐标
var coordinate = evt.coordinate;
//将伪墨卡托坐标转换成可读的HDMS格式
var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
//设置弹窗的显示内容
content.innerHTML = "<p>你点击了这里:</p><code>" + hdms + "</code>";
//设置弹窗的弹出位置
overlay.setPosition(coordinate);
});
