Vite + Vue3 + OpenLayers 弹窗

Vite + Vue3 + OpenLayers 弹窗

一、本文简介

tanchuan

鼠标在地图上点击会出现一个弹窗，并且出现在鼠标指针上方。

如果在地图边缘点击，会保证弹窗能完整显示出来，所以会稍微移动底图。

二、开发环境

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

使用 Vite 初始化项目并安装 ol ，更详细做法可以查看 『Vite + Vue3 + OpenLayers 起步』

三、思路与编码

思路

1. 初始化地图
2. 地图点击事件，并获取当前点击的坐标位置
3. 弹出窗口

初始化地图

初始化地图详细操作可以查看 『Vite + Vue3 + OpenLayers 起步』

• 要初始化地图，首先需要引入 ol 提供的基础服务
• 还需要一个地图容器（我使用的是一个 div 标签）
• 然后通过 ol 提供的方法绑定这个容器
• 配置基础参数，渲染地图

地图点击事件

• ol 提供了一系列的交互事件，其中就有 鼠标点击底图 事件

• 利用这个事件获取到当前点击的坐标位置

弹出窗口

• 弹窗需要一个容器来展示信息（我使用了一个 div 标签）

• 通过"地图点击事件“获取到的坐标位置来定位弹窗出现的位置

本例使用了 ol 提供的方法，把 弹窗容器 放入 ol的“覆盖物”’ 中管理。

弹窗展示了现在所点击的坐标轴信息，还有一个关闭按钮。

编码

四、推荐

本例展示地址（vite+vue3+ol）

本例展示地址（备份链接）

本例仓库（vite+vue3+ol）

ol在vue2中使用（预览）

ol在vue2中使用（仓库）

OpenLayers 官网

《WebGIS之OpenLayers全面解析（第2版）》