单屏影像切换与分屏影像切换

src/views/remote/MapView.vue

@@ -5,6 +5,40 @@
       <div id="mapCon1" v-show="maptype == 'split'"></div>
       <div id="mapCon2" v-show="maptype == 'split'"></div>
     </template>
+    <!-- 单屏影像切换 -->
+    <div class="ImageList" v-show="maptype == 'normal'">
+      <div
+        :class="['item', item.imgName]"
+        @click="shpBaseMap('mapDiv', item.index)"
+        v-for="(item, i) in containerList"
+        :key="i"
+      >
+        <span class="label"> {{ item.name }} </span>
+      </div>
+    </div>
+    <!-- 分屏的影像切换 -->
+    <div v-show="maptype == 'split'">
+      <div class="ImageList">
+        <div
+          :class="['item', item.imgName]"
+          @click="shpBaseMap('mapCon1', item.index)"
+          v-for="(item, i) in containerList"
+          :key="i"
+        >
+          <span class="label"> {{ item.name }} </span>
+        </div>
+      </div>
+      <div class="ImageList ImageList1">
+        <div
+          :class="['item', item.imgName]"
+          @click="shpBaseMap('mapCon1', item.index)"
+          v-for="(item, i) in containerList"
+          :key="i"
+        >
+          <span class="label"> {{ item.name }} </span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -49,9 +83,37 @@ export default {
       maps: {},
       curPageResultLayer: null,
       vectorLayer: null,
+      vecLayer: null, //矢量地图
+      cvaLayer: null, //矢量标注
+      imgLayer: null, //影像地图
+      imgCiaLayer: null, //影像标注
+      terLayer: null, //地形晕染
+      ctaLayer: null, //地形标注
+      containerList: [
+        {
+          name: "矢量地图",
+          index: 1,
+          imgName: "shiliangditu",
+        },
+        {
+          name: "影像地图",
+          index: 2,
+          imgName: "yingxiangditu",
+        },
+        {
+          name: "地形晕染",
+          index: 3,
+          imgName: "dixingyunran",
+        },
+      ],
     };
   },
   methods: {
+    shpBaseMap(container, base) {
+      // this.changeBaseLayers("mapDiv", 2);
+      this.changeBaseLayers(container, base);
+      console.log(1111);
+    },
     createMap() {
       var view = new View({
         center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
@@ -70,6 +132,25 @@ export default {
       this.addMap("mapCon2", view);
       // }
     },
+    changeBaseLayers(container, base) {
+      let indexs = [];
+      switch (base) {
+        case 1:
+          indexs = [0, 1];
+          break;
+        case 2:
+          indexs = [2, 3];
+          break;
+        case 3:
+          indexs = [4, 5];
+          break;
+      }
+      for (let i = 0; i <= 5; i++) {
+        this.maps[container]
+          .getAllLayers()
+          [i].setVisible(indexs.indexOf(i) > -1);
+      }
+    },
     addMap(target, view) {
       if (this.maps[target]) return;
       // var gaodeMapLayer = new TileLayer({
@@ -88,53 +169,59 @@ export default {
 
       var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
       // 矢量底图
-      var vecLayer = new Tile({
+      this.vecLayer = new Tile({
         source: new XYZ({
           url:
             "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
             key,
         }),
+        visible: true,
       });
       // 矢量标注
-      var cvaLayer = new Tile({
+      this.cvaLayer = new Tile({
         source: new XYZ({
           url:
             "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
             key,
         }),
+        visible: true,
       });
 
       // 影像底图
-      var imgLayer = new Tile({
+      this.imgLayer = new Tile({
         source: new XYZ({
           url:
             "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
             key,
         }),
+        visible: false,
       });
       // 影像标注
-      var imgCiaLayer = new Tile({
+      this.imgCiaLayer = new Tile({
         source: new XYZ({
           url:
             "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
             key,
         }),
+        visible: false,
       });
       // 地形晕染
-      var terLayer = new Tile({
+      this.terLayer = new Tile({
         source: new XYZ({
           url:
             "http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
             key,
         }),
+        visible: false,
       });
       // 地形标注层
-      var ctaLayer = new Tile({
+      this.ctaLayer = new Tile({
         source: new XYZ({
           url:
             "http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
             key,
         }),
+        visible: false,
       });
 
       let map = new Map({
@@ -142,7 +229,15 @@ export default {
         target,
         //地图容器中加载的图层
         // layers: [gaodeMapLayer],
-        layers: [vecLayer, cvaLayer],
+        layers: [
+          this.vecLayer,
+          this.cvaLayer,
+          this.imgLayer,
+          this.imgCiaLayer,
+          this.terLayer,
+          this.ctaLayer,
+        ], //
+        // layers: [this.imgLayer,this.imgCiaLayer,],
         //地图视图设置
         view, //同一个view
       });
@@ -165,7 +260,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .map {
   width: calc(100% - 520px);
   height: 91vh;
@@ -191,4 +286,72 @@ export default {
   width: 50%;
   height: 100%;
 }
+
+.ImageList {
+  width: 265px;
+  height: 70px;
+  // background-color: rgba(255, 192, 203, 0.427);
+  position: absolute;
+  bottom: 20px;
+  // left: calc(50% - 100px);
+  left: calc(100% - 290px);
+  z-index: 40;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .item {
+    width: 76px;
+    height: 57px;
+    background: rgba(14, 30, 69, 0.52);
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: 6px;
+    position: relative;
+    border-radius: 1.5px;
+    // box-sizing: content-box;
+    // box-sizing: border-box;
+
+    .label {
+      display: inline-block;
+      width: 146px;
+      height: 26px;
+      line-height: 26px;
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      font-size: 21px;
+      background: #dddddd8f;
+      transform: scale(0.5);
+      transform-origin: bottom right;
+      border-radius: 2px 0 0 2px;
+      color: rgb(19, 113, 251);
+    }
+  }
+  .item1 {
+    position: absolute;
+    bottom: 20px;
+    // left: calc(50% - 100px);
+    left: calc(50% - 290px);
+  }
+  .shiliangditu {
+    background: url("~@/assets/dituimg/shiliangditu.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+  .yingxiangditu {
+    background: url("~@/assets/dituimg/yingxiangditu.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .dixingyunran {
+    background: url("~@/assets/dituimg/dixingyunran.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.ImageList1 {
+  position: absolute;
+  bottom: 20px;
+  // left: calc(50% - 100px);
+  left: calc(50% - 290px);
+  z-index: 40;
+}
 </style>