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

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

效果展示

实现的效果如下：

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

完整代码

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

1. 组件模板与脚本

<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]"> 在 Vue 3 中使用 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'; import router from "@/router"; const map = ref(null); 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; } button.back-button { display: block; margin: 20px auto; padding: 8px 16px; background-color: #42B983; color: #fff; border: none; border-radius: 4px; cursor: pointer; } </style>

2. 项目依赖

确保已安装以下依赖：

javascript">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()，显示弹窗内容。

运行效果

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

javascript">坐标为 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; 
}