2-实现一个简单的气泡弹窗

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