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">返回&l