管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2023-11-29 97277a2c41d80bbf375f88a47e242f1b17602b2b
src/components/MapDiv.vue
@@ -23,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 {
@@ -56,6 +64,8 @@
  methods: {
    changeMap(res) {
      this.isSplitFlag = res
      this.getMapViewCenter(this.isSplitFlag);
      switch (res) {
        case 1:
          this.isShowCeMap = true
@@ -64,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)
@@ -76,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:
@@ -86,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
@@ -109,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),
        })
@@ -171,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()
@@ -192,8 +233,26 @@
      }
      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 => {
      if (this.isSplitFlag == 1) {
        this.changeMap(3)
@@ -225,7 +284,7 @@
  width: 100%;
}
.sdkMapTwo {
  width: calc(50% - 1px);
  width: calc(50% - 2px);
}
.olMap {
  height: 100%;
@@ -237,7 +296,7 @@
  width: 100%;
}
.olMapTwo {
  width: calc(50% - 1px);
  width: calc(50% - 2px);
}
#ds {
  height: 100%;