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

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

本节实现了一个简单的气泡弹窗，点击地图上任意一个位置，弹窗显示该点的坐标。

本节除了地图容器map外，还需要一个弹窗容器popup，用于在html中显示弹窗。本节用到的数据结构如下

ol.Overlay对象用于创建弹窗，显示在地图之上。

• 引入openlayers的css和js文件。

• 创建一个存放地图的容器map和弹窗容器popup。

• 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 = "
你点击了这里:
" + hdms + "";
    //设置弹窗的弹出位置
    overlay.setPosition(coordinate);
});