49.在 Vue 3 中使用 OpenLayers 实现单击鼠标显示经纬度（引用 Popup 扩展版）

在 WebGIS 开发中，OpenLayers 是一个功能强大的开源库，提供了丰富的地图渲染与交互功能。本文将介绍如何在 Vue 3 中使用 OpenLayers，通过单击地图上的某一点，弹出一个显示经纬度坐标的弹窗，具体实现基于 Popup 扩展库。

效果展示

实现的效果如下：

加载 OSM（OpenStreetMap）作为底图。
在鼠标单击地图的任意位置时，显示该点的经纬度坐标。
使用 Popup 扩展库美化弹窗样式。

完整代码

以下是完整代码实现，包含 Vue 3 组件代码和样式。

1. 组件模板与脚本

<!--* @Author: 彭麒* @Date: 2024/12/28* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><button class="back-button" @click="goBack">返回</button><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers单击鼠标获得坐标经纬度（引用 Popup 扩展版）</div></div><div id="vue-openlayers"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import 'ol-popup/src/ol-popup.css';
import { Map, View } from 'ol';
import { transform } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { toStringHDMS } from 'ol/coordinate';
import Popup from 'ol-popup';
const map = ref(null);
import router from "@/router";
const goBack = () => {router.push('/OpenLayers');
};
const initializeMap = () => {// 创建地图实例map.value = new Map({target: 'vue-openlayers',layers: [new TileLayer({title: 'OSM',type: 'base',visible: true,source: new OSM(),}),],view: new View({center: [13247019.404399557, 4721671.572580107],projection: 'EPSG:3857',zoom: 5,}),});// 创建 Popup 实例const popup = new Popup();map.value.addOverlay(popup);// 单击事件监听map.value.on('singleclick', (evt) => {const prettyCoord = toStringHDMS(transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'),2);popup.show(evt.coordinate,`<div><h2>坐标为</h2><p>${prettyCoord}</p></div>`);});
};// 在组件挂载时初始化地图
onMounted(() => {initializeMap();
});
</script><style scoped>
.container {width: 840px;height: 520px;margin: 50px auto;border: 1px solid #42B983;
}#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

2. 项目依赖

确保已安装以下依赖：

npm install ol ol-popup

功能说明

1. 地图初始化

使用 OpenLayers 创建地图实例，添加 OSM 图层作为底图。
设置地图的中心点坐标为 [13247019.404399557, 4721671.572580107]（投影坐标），并设置缩放级别为 5。

2. 坐标转换

使用 transform 函数将 OpenLayers 的投影坐标（EPSG:3857）转换为地理坐标（EPSG:4326），并格式化为度、分、秒（HDMS）格式，方便阅读。

3. 弹窗显示

利用 ol-popup 扩展库，创建弹窗实例并添加到地图中。
在单击事件中调用 popup.show()，显示弹窗内容。

运行效果

将代码运行后，你将看到一个可交互的地图，当用户单击地图上的某一点时，会弹出一个窗口，显示该点的经纬度坐标，格式如下：

坐标为 39°54′50.13″N 116°23′29.92″E

样式优化

你可以根据需要自定义弹窗的样式，例如：

.ol-popup { background-color: rgba(0, 0, 0, 0.75); color: #fff; padding: 8px; border-radius: 4px; min-width: 200px; font-family: Arial, sans-serif; 
}