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>