vue中使用openlayer实现视图联动

multiView.vue

<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 map1= new Map({
      target: "map1",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [104.704968,31.540962],  //西南科技大学
        zoom: 15
      })
    });

   var map2=new Map({
      target: "map2",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view:map1.getView()
    });
  }
};

</script>
 
<style lang='scss'>
    .main{
         display: flex;
         flex-flow: row nowrap;
         justify-content: space-between;
        //  border: 1px solid red;
          #map1{
         border: 1px solid rgb(122, 116, 116);

             display: flex;
            width: 50%;
            background-color: rgb(121, 119, 119);
            margin-right: 10px;
            }
            #map2{
         border: 1px solid rgb(122, 116, 116);

             display: flex;
             flex: auto;
            background-color: rgb(121, 119, 119);
            }
    }
   
</style>

运行效果