问题描述

有两个div，分别加载一个地图：div1:map1；div2:map2

切换的时候，地图也要同时切换；比如雨情是map1，水情是map2，切换的时候map2显示不出来；

代码环境

vue 2；vue element；openlayer 6.5

你什么代码都不贴，这如何帮你判断？ 比如有没有报错？两个div 的切换是否重载了的地图插件？

部分代码如下

渲染地图的两个div，分别是rainMap、waterMap

<div :class="isAdvanced ? 'section_41_2 flex-row justify-between' : 'section_41 flex-row justify-between'">
          <div style="width: 100%;height: 100%;top: 100px;left: 300px; background: url('/data/map_roundButtom.png') no-repeat center bottom;"
            v-show="isRainList" id="rainMap" ref="rainMap">
          </div>
          <div style="width: 100%;height: 100%;top: 100px;left: 300px; background: url('/data/map_roundButtom.png') no-repeat center bottom;"
            v-show="isWaterList" id="waterMap" ref="waterMap">
          </div>
 </div>

地图初始化

data() {
    return {
      isWaterList: false,
      isRainList: true,//默认监测报表，切换雨量报表 
    }
},
mounted() {
    this.initMap();    
    this.switchTable(1);
},
methods: {
  initMap() {
      const areaLayer = new VectorLayer({
        name: '海宁区域',
        source: new VectorSource({
          url: '/data/HainingArea.geojson',
          format: new GeoJSON()
        }),
        style: new Style({
          stroke: new Stroke({
            color: '#1E71B8',
            width: 2
          }),
          fill: new Fill({
            color: 'rgba(50, 103, 174, 0.7)' //'rgba(15, 62, 115, 0.1)'
          })
        })
      });

    let newView = new View({
          center: fromLonLat([120.586028, 30.4384593], 'EPSG:3857'),
          zoom: 11.4,
          maxZoom: 18,
          minZoom: 6,
          projection: 'EPSG:3857'
        });

      let mapresource='rainMap'
      if(this.isRainList){
        mapresource = 'rainMap';
        // 创建地图视图
        
        window.map = new Map({
          target: mapresource,
          layers: [areaLayer],
          view: newView,
          controls: defaultControls({ //加载控件到地图容器中
            zoom: false,
            rotate: false,
            attribution: false
          })
        })
      }else if(this.isWaterList){
        mapresource = 'waterMap';
        // 创建地图视图
        window.map = new Map({
          target: mapresource,
          layers: [areaLayer],
          view: newView,
          controls: defaultControls({ //加载控件到地图容器中
            zoom: false,
            rotate: false,
            attribution: false
          })
        })
      }
  },
  // 水情与雨情切换 默认雨情
    switchTable(type) {
      if(type==1){
          this.isWaterList = false;
          this.isRainList = true;
      }else{
          this.isWaterList = true;
          this.isRainList = false;
      }
  }
}

切换“雨情”、“水情”，渲染不同的地图，默认的雨情地图rainMap能显示，水情地图waterMap无法显示出来

每次切换要，重新 init 地图吧

initMap只执行一次，切换的时候window.map那里还要重新配置Map的参数信息的