rsmonitoring-manage/src/views/remote/MapView.vue

<template>
  <div class="map">
    <div id="mapDiv" v-show="maptype == 'normal'"></div>
    <template>
      <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 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 class="ImageList">
        <div
          :class="['item', item.imgName]"
          @click="shpBaseMap('mapCon2', item.index)"
          v-for="(item, i) in containerList"
          :key="i"
        >
          <span class="label"> {{ item.name }} </span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ref, onMounted } from "vue";
import "ol/ol.css";
import { get as getProjection, transform } from "ol/proj.js";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { Vector as SourceVec, XYZ } from "ol/source";
import { defaults as defaultControls, ScaleLine } from "ol/control";
export default {
  props: {
    maptype: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      // type: "normal",
      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);
    },
    createMap() {
      var view = new View({
        center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
        // center: gcoord.transform(
        //   [106.67591743605254, 38.21012898330025],
        //   gcoord.WGS84,
        //   gcoord.BD09
        // ), //地图初始中心点
        projection: "EPSG:4326",
        zoom: 4,
        minZoom: 1,
      });
      this.addMap("mapDiv", view);
      // } else {
      this.addMap("mapCon1", view);
      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({
      //   title: "高德地图",
      //   // source: new XYZ({
      //   //   url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
      //   //   wrapX: false,
      //   // }),
      //   source: new XYZ({
      //     url: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.arcgisKey}`,
      //     // url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/4905/{z}/{y}/{x}`,
      //     crossOrigin: "anonymous",
      //     // attributions: ["ArcGIS", new Date().getFullYear()],
      //   }),
      // });
      //实例化比例尺控件（ScaleLine）
      var scaleLineControl = new ScaleLine({
        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
        units: "metric",
      });
      var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
      // 矢量底图
      let 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,
      });
      // 矢量标注
      let 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,
      });

      // 影像底图
      let 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,
      });
      // 影像标注
      let 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,
      });
      // 地形晕染
      let 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,
      });
      // 地形标注层
      let 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({
        //地图容器div的ID
        target,
        //地图容器中加载的图层
        // layers: [gaodeMapLayer],
        layers: [vecLayer, cvaLayer, imgLayer, imgCiaLayer, terLayer, ctaLayer], //
        // layers: [this.imgLayer,this.imgCiaLayer,],
        //地图视图设置
        view, //同一个view
        controls: defaultControls({
          //地图中默认控件
          attribution: false, //地图数据源信息控件是否可收缩,默认为true
        }).extend([scaleLineControl]), //加载鼠标位置控件
      });
      this.maps[target] = map;
      window.map = this.maps;
      map.on("moveend", function (e) {
        var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
        console.log(zoom);
        if (zoom >= 12) {
          // tianjinlayer.getSource().clear(); //控制地图图层不可见
          console.log("我大于12");
        } else {
          console.log("我小于12");
        }
      });
    },
  },
  mounted() {
    this.createMap();
  },
  watch: {
    maptype() {
      this.$nextTick(() => {
        window.map.mapDiv.updateSize(); // 更新地图尺寸
        window.map.mapCon1.updateSize(); // 更新地图尺寸
        window.map.mapCon2.updateSize(); // 更新地图尺寸
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.map {
  // width: calc(100% - 520px);
  width: 70%;
  height: 91vh;
  position: relative;
}

#mapDiv {
  width: 100%;
  height: 100%;
}

#mapCon2 {
  position: absolute;
  top: 0px;
  left: 50%;
}

#mapCon1 {
  position: absolute;
  top: 0px;
  left: 0%;
}

#mapCon1,
#mapCon2 {
  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>