底图切换

Surpriseplus

2023-03-17 9468898e83478c60165b987350f35edb6d1c77f8

 src/components/mapol.vue

@@ -1,17 +1,42 @@
<template>
  <div id="mapol">
    <div
      @click="changeMenulayer"
      class="center CenDiv"
      :class="{ center1: centerFlag }"
    >
    <div style="display: flex">
      <div
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
      >
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>

      </div>
      <div
        @click="changeMapType"
        class="changeMapType"
      >
        <div
          id="cenBg"
          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
        ></div>
      </div>
    </div>
    <div v-show="$store.state.isNaviget"  class="sindagis-map-compass">
    <!--    <div-->
    <!--      @click="changeMenulayer"-->
    <!--      class="center CenDiv"-->
    <!--      :class="{ center1: centerFlag }"-->
    <!--    >-->
    <!--      <div-->
    <!--        id="cenBg"-->
    <!--        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
    <!--      ></div>-->

    <!--    </div>-->
    <div
      v-show="$store.state.isNaviget"
      class="sindagis-map-compass"
    >
      <span
        class="left"
        @click="leftClick"
@@ -57,38 +82,58 @@
      isActive: true,
      isMenuLayer: false,
      rotate: 0,
      currentDir: ''
      currentDir: '',
      show2DMap: false,
    }
  },
  mounted() {
    this.init2DMap()
    this.init2DMap();
    this.$bus.$on('changemapType', (e) => {
      this.show2DMap = e;
    });
  },
  methods: {

    init2DMap() {
      var vectorLayer = new TileLayer({
        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}",
        }),
      })
      var imageLayer = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
        }),
      })
      // var vectorLayer = new TileLayer({
      //   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}",
      //   }),
      // })
      // var imageLayer = new TileLayer({
      //   source: new XYZ({
      //     url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
      //   }),
      // })
      window.map = new Map({
        target: "mapol",
        layers: [imageLayer, vectorLayer],
        layers: [],
        view: new View({
          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
          center: [105.02, 34.9],
          zoom: 4,
          projection: "EPSG:3857",
          projection: "EPSG:4326",
          minZoom: 5,
        }),
        controls: defaultControls().extend([
          new FullScreen(),
          

        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })

      window.olBaseMapLayer = new TileLayer({
        title: "高德地图",
        source: new XYZ({
          url: gaoDeBaseUrl[1].url,
          wrapX: false
        })
      });
      window.map.addLayer(window.olBaseMapLayer);





      // var scaleLine = new  ScaleLine({
      //   units: "metric"
      // });
@@ -101,10 +146,26 @@

    },

    //二维/三维地图切换
    changeMapType() {
      // 
      this.show2DMap = !this.show2DMap;
      //二维
      if (this.show2DMap) {
        this.$bus.$emit("changemap", 2);
      }
      //三维
      else {
        this.$bus.$emit("changemap", 3);
      }
      this.$bus.$emit("changemapType", this.show2DMap);
    },

    changeMenulayer() {
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
      this.$bus.$emit("setChangeBaseMapLayer", true)
      // this.isActive = !this.isActive
      // this.isMenuLayer = !this.isMenuLayer
      // this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {
@@ -281,4 +342,35 @@
  background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}

.changeMapType {
  position: absolute;
  bottom: 1%;
  left: calc(1% + 75px);
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  // box-shadow: 3px 3px 6px #666;
  border-radius: 5px;
  // background: #fff;
  cursor: pointer;
}
.mapTypeTwo {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/3D.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTypeThree {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/2D 拷贝 2.png");
  background-repeat: no-repeat;
  background-size: contain;
}
</style>