Vite + Vue3 + OpenLayers 弹窗
一、本文简介
鼠标在地图上点击会出现一个弹窗，并且出现在鼠标指针上方。
如果在地图边缘点击，会保证弹窗能完整显示出来，所以会稍微移动底图。
二、开发环境
Vite + Vue3 + ol6
# 1、使用 Vite 创建项目；取个好听的项目名；拉取 vue 的代码模板
npm init vite@latest
# 2、初始化项目
cd you-project
npm install
# 3、安装 ol
npm i ol -S
# 4、启动项目
npm run dev
三、思路与编码
思路
初始化地图
要初始化地图，首先需要引入 提供的基础服务
还需要一个地图容器（我使用的是一个 标签）
然后通过 提供的方法绑定这个容器
配置基础参数，渲染地图
地图点击事件
提供了一系列的交互事件，其中就有 鼠标点击底图 事件
利用这个事件获取到当前点击的坐标位置
弹出窗口
弹窗需要一个容器来展示信息（我使用了一个 标签）
通过"地图点击事件“获取到的坐标位置来定位弹窗出现的位置
本例使用了 提供的方法，把 弹窗容器 放入 ol的“覆盖物”’ 中管理。
弹窗展示了现在所点击的坐标轴信息，还有一个关闭按钮。
编码
✖
{{currentCoordinate}}