OpenLayers分屏联动对比

温馨提示：本文所用OpenLayers版本为6.9.0

解决方案

一开始的想法是，一侧地图拖动时动态更新另一侧地图的Center，但是API没找见实时拖动的move事件，postrender事件可以实现但是影响效率，以下为实现方法，有兴趣的可以试试，但不建议使用。

function togetherMove() {allMaps[0].on("postrender", function (e) {var c0 = allMaps[0].getView().getCenter();var z0 = allMaps[0].getView().getZoom();if (allMaps[1]) {allMaps[1].getView().setCenter(c0, z0);allMaps[1].getView().setZoom(z0);}});if (allMaps[1])allMaps[1].on("postrender", function (e) {var c1 = allMaps[1].getView().getCenter();var z1 = allMaps[1].getView().getZoom();allMaps[0].getView().setCenter(c1, z1);allMaps[0].getView().setZoom(z1);});
}

后来发现，两个map共用一个view即可实现联动

全部代码

<template><div id="mapContainer"></div><div id="mapContainer2"></div>
</template><script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { onMounted } from "@vue/runtime-core";
export default {setup() {let view = new View({projection: "EPSG:4326",center: [108.961029, 34.208386],zoom: 12,});onMounted(() => {let map = new Map({target: "mapContainer",layers: [new TileLayer({source: new OSM(),}),],view: view,});let map2 = new Map({target: "mapContainer2",layers: [new TileLayer({source: new OSM(),}),],view: view,});});},
};
</script>
<style>
#mapContainer {width: 50%;height: 100%;left: 0;bottom: 0;position: absolute;
}
#mapContainer2 {width: 50%;height: 100%;right: 0;bottom: 0;position: absolute;
}
</style>

OpenLayers分屏联动对比相关推荐

Leaflet实现地图分屏联动
文章目录 1. 实现思路 2. 完整代码 1. 实现思路分别为地图对象绑定缩放.平移监听事件: 监听事件触发后依次为地图对象设置视图,就是将触发事件的地图视图设置到其他地图对象 2. 完整代码 &l ...
浏览器分屏新玩法之：购物达人
借助ieface浏览器的分屏功能来购物,会更加方便. • 即时在多个购物平台之间对相同商品的价格及促销优惠条件进行对比. • 比较同种商品不同款式规格之间的细微异同. • 同时查看商品销售页面及其他网 ...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
cesium分屏对比
参考地址:https://blog.csdn.net/qq_29808089/article/details/108895254 简单介绍一下:分屏对比和卷帘对比的区别(只是个人理解,不对请指正) 分 ...
电脑文件夹可以分屏的软件_「原创文」窗口快速分屏，文件对比复制高效不止一点｜每天学一点...
- 原创声明,侵权必究 - 有没有这种情况,你需要频繁从一个文档中复制文字,然后粘贴到网页中. 又或者两篇文档,你需要复制或者对比又或者,两个文件夹中对文件进行检查或者对比这种时候,大家经常频繁的 ...
mapbox 分屏对比
我们要做的的是左右分屏后两张地图同步对比,而且可以切换数据,实现的效果图是这样的,原博文地址:https://blog.csdn.net/weixin_42599077/article/details ...
电脑怎么分屏2个显示器_程序员一台电脑装2个显示屏？因为专业
使用电脑双屏显示已经十分普及,并不一定只有电影里面可以看到. 笔记本通过显示器输出.电脑通过投影输出.单个主机通过两台显示输出,均属于双屏显示. 当然,双频显示可以极大的提高工作效率. 以程序员为例, ...

OpenLayers分屏联动对比

解决方案

全部代码

OpenLayers分屏联动对比相关推荐

最新文章

热门文章