Vite + Vue3 + OpenLayers 切换地图容器

Vite + Vue3 + OpenLayers 切换地图容器

本文简介

Vite + Vue3 + OpenLayers 切换地图容器

将地图切换到不同容器里展示。

不管在地图上做任何操作，切换容器后，操作过的内容也是会同步过去。

思路

使用 ol 提供的方法可以获取 当前地图所在容器 和 设置地图到新的容器 里。

• Map.getTarget() 获取当前地图所在容器
• Map.setTarget() 设置地图到指定容器

编码

let target = map.value.getTarget() === 'map1' ? 'map2' : 'map1'

如果当前在 map1 的话，就返回 map2 ，否则返回 map1 。通过这样操作就可以把地图来回切换容器了。

更多推荐

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

本例仓库（vite+vue3+ol）

ol在vue2中使用（预览）

ol在vue2中使用（仓库）

OpenLayers 官网

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

如果不清楚 OpenLayers 是什么，可以阅读： 『Vite + Vue3 + OpenLayers 起步』