admin管理员组

文章数量:1531278

2023年12月12日发(作者：)

Vite+Vue3+OpenLayers同步两个地图基础操作

Vite + Vue3 + OpenLayers 同步两个地图基础操作

一、本文简介

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

使用

Vite

初始化项目并安装

ol

，更详细做法可以查看 『Vite + Vue3 + OpenLayers 起步』

思路

1. 两个地图容器，分别使用不同的图源

2. 绑定同一个视图层

两个地图使用同一个view，所以在移动、缩放、旋转等操作都是同步的。

编码

更多推荐

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

本例仓库（vite+vue3+ol）

ol在vue2中使用（预览）

ol在vue2中使用（仓库）

OpenLayers 官网

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

如果不清楚

OpenLayers

是什么，可以阅读： 『Vite + Vue3 + OpenLayers 起步』

本文标签： 地图使用项目操作基础

版权声明：本文标题：Vite+Vue3+OpenLayers同步两个地图基础操作 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1702357121a2819.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。