openLayer实现两个地图联动

其主要思想就是将两个地图放在一个view即可

<template>
        <div class="main">
             <div id="map1"></div>
             <div id="map2"></div>
        </div>    
</template>
 
<script>
import {Map,View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
 
export default {
  data() {
    return {
        
    };
  },
  mounted() {

      var view = new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [0,0],  
        zoom: 13
      })
 
    var map1= new Map({
      target: "map1",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: view,
    });
 
   var map2=new Map({
      target: "map2",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view:view,
    });
  }
};
 
</script>
 
<style >
    .main{
         height: 100%;
         width: 100%;               
        
    }

      #map1{
        
            width: 50%;
            height: 100%;
            float: left;
           
            }
            #map2{
            width: 50%;
            height: 100%;
            float: left;
            }
   
</style>