vue中使用openlayer实现视图联动

我就是我 2021-07-25 11:19 449阅读 0赞

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>

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/8f134fb04f2146c28dc5f193ae05cb38.png