管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2023-11-29 97277a2c41d80bbf375f88a47e242f1b17602b2b
src/components/MapDiv.vue
@@ -10,7 +10,10 @@
    >
      <mapsdk></mapsdk>
    </div>
    <div id="ds" v-show="isShowDs"></div>
    <div
      id="ds"
      v-show="isShowDs"
    ></div>
    <!--openLayers显示界面-->
    <div
      v-show="isOlMapFlag"
@@ -20,20 +23,28 @@
    >
      <mapol></mapol>
    </div>
    <add-online-map ref="addOnlineMap" />
    <add-online-ol-map ref="addOnlineOlMap"></add-online-ol-map>
  </div>
</template>
<script>
import mapsdk from "./mapsdk"
import mapol from "./mapol"
import { transform } from "ol/proj"
import ol from "ol"
import $ from "jquery"
import AddOnlineMap from '../views/Tools/AddOnlineMap.vue'
import AddOnlineOlMap from '../views/Tools/AddOnlineOLMap.vue'
export default {
  name: "",
  components: {
    mapsdk,
    mapol,
    AddOnlineMap,
    AddOnlineOlMap
  },
  data() {
    return {
@@ -53,6 +64,8 @@
  methods: {
    changeMap(res) {
      this.isSplitFlag = res
      this.getMapViewCenter(this.isSplitFlag);
      switch (res) {
        case 1:
          this.isShowCeMap = true
@@ -61,8 +74,9 @@
          this.isShowOlMap = true
          this.isSdkMapFlag = true
          var that = this
          this.$store.state.setChangeBaseMap = false;
          setTimeout(function () {
            window.map.updateSize()
            that.showSplitMap()
          }, 500)
@@ -73,8 +87,11 @@
          this.isShowDs = false
          this.isShowOlMap = false
          this.isOlMapFlag = true
          var val = this.$store.state.Map3;
          setTimeout(function () {
            window.map.updateSize()
            window.map.getView().setCenter([val[0], val[1]])
            window.map.getView().setZoom(val[2])
          }, 300)
          break
        case 3:
@@ -83,8 +100,33 @@
          this.isShowOlMap = false
          this.isOlMapFlag = false
          this.isShowCeMap = false
          var val = this.$store.state.Map3;
          this.$store.state.setChangeBaseMap = true;
          window.Viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(val[0], val[1], val[2]),
          })
          break
      }
    },
    getMapViewCenter(res) {
      switch (res) {
        case 2:
          var position = window.Viewer.camera.position
          var ellipsoid = window.Viewer.scene.globe.ellipsoid
          var cartographic = ellipsoid.cartesianToCartographic(position)
          var lat = Cesium.Math.toDegrees(cartographic.latitude)
          var lng = Cesium.Math.toDegrees(cartographic.longitude)
          var level = this.getLevel(cartographic.height)
          this.$store.state.Map3 = [lng, lat, level]
          break;
        case 3:
          var position = window.map.getView().getCenter()
          var level = this.getHeight(parseInt(window.map.getView().getZoom()))
          this.$store.state.Map3 = [position[0], position[1], level]
          break;
      }
    },
    showSplitMap() {
      var that = this
@@ -106,6 +148,7 @@
        // var pos = transform(position, 'EPSG:3857', 'EPSG:4326');
        var pos = position
        var level = that.getHeight(parseInt(window.map.getView().getZoom()))
        window.Viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], level),
        })
@@ -168,6 +211,7 @@
      var lat = Cesium.Math.toDegrees(cartographic.latitude)
      var lng = Cesium.Math.toDegrees(cartographic.longitude)
      var level = this.getLevel(cartographic.height)
      var value
      // window.map
      //   .getView()
@@ -189,10 +233,33 @@
      }
      return this.levelArray[this.levelArray.length - 1]
    },
    showBaseMapLayer(res) {
      this.closeAllBaseMapLayer();
      if(res.type == 'ol'){
        this.$refs && this.$refs.addOnlineOlMap && this.$refs.addOnlineOlMap.open("2D在线地图", null);
      }else{
        this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("3D在线地图", null);
      }
    },
    closeAllBaseMapLayer(){
      this.$refs && this.$refs.addOnlineOlMap && this.$refs.addOnlineOlMap.close();
      this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.close();
    },
  },
  mounted() {
    this.$bus.$on("setChangeBaseMapLayer", (res) => {
      this.showBaseMapLayer(res)
    })
    //
    this.$bus.$on("changemap", e => {
      this.changeMap(e)
      if (this.isSplitFlag == 1) {
        this.changeMap(3)
      } else {
        this.changeMap(e)
      }
    })
  },
}
@@ -217,7 +284,7 @@
  width: 100%;
}
.sdkMapTwo {
  width: calc(50% - 1px);
  width: calc(50% - 2px);
}
.olMap {
  height: 100%;
@@ -229,7 +296,7 @@
  width: 100%;
}
.olMapTwo {
  width: calc(50% - 1px);
  width: calc(50% - 2px);
}
#ds {
  height: 100%;