模型库 军标库

lixuliang

2024-04-28 6c17299e2b123a55423e01933654a10d94be616b

 src/components/MapDiv.vue

@@ -9,11 +9,10 @@
      :class="[isShowCeMap ? 'sdkMapTwo' : 'sdkMapOne']"
    >
      <mapsdk></mapsdk>
      <militarymark></militarymark>
      <modelplotting></modelplotting>
    </div>
    <div
      id="ds"
      v-show="isShowDs"
    ></div>
    <div id="ds" v-show="isShowDs"></div>
    <!--openLayers显示界面-->
    <div
      v-show="isOlMapFlag"
@@ -29,22 +28,25 @@
</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'
import mapsdk from "./mapsdk";
import militarymark from "./h11militaryMark.vue";
import modelplotting from "./h12modelPlotting.vue";
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,
    militarymark,
    modelplotting,
    AddOnlineMap,
    AddOnlineOlMap
    AddOnlineOlMap,
  },
  data() {
    return {
@@ -59,210 +61,211 @@
        250000, 200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200,
        100, 50, 25, 10, 0,
      ],
    }
    };
  },
  methods: {
    changeMap(res) {
      this.isSplitFlag = res
      this.isSplitFlag = res;
      this.getMapViewCenter(this.isSplitFlag);
  
      switch (res) {
        case 1:
          this.isShowCeMap = true
          this.isShowDs = true
          this.isOlMapFlag = true
          this.isShowOlMap = true
          this.isSdkMapFlag = true
          var that = this
          this.isShowCeMap = true;
          this.isShowDs = true;
          this.isOlMapFlag = true;
          this.isShowOlMap = true;
          this.isSdkMapFlag = true;
          var that = this;
          this.$store.state.setChangeBaseMap = false;
          setTimeout(function () {
            window.map.updateSize();
            that.showSplitMap();
          }, 500);
       
            window.map.updateSize()
            that.showSplitMap()
          }, 500)

          break
          break;
        case 2:
          this.isSdkMapFlag = false
          this.isShowDs = false
          this.isShowOlMap = false
          this.isOlMapFlag = true
          this.isSdkMapFlag = false;
          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
            window.map.updateSize();
            window.map.getView().setCenter([val[0], val[1]]);
            window.map.getView().setZoom(val[2]);
          }, 300);
          break;
        case 3:
          this.isSdkMapFlag = true
          this.isShowDs = false
          this.isShowOlMap = false
          this.isOlMapFlag = false
          this.isShowCeMap = false
          this.isSdkMapFlag = true;
          this.isShowDs = false;
          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
          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]
          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]
          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
      var that = this;
      $("#mapView")
        .off()
        .on("mousemove", function () {
          if (that.isSplitFlag == 1) {
            window.Viewer.camera.changed.addEventListener(that.sdktool())
            window.Viewer.camera.changed.addEventListener(that.sdktool());
          }
        })
        .on("mouseout", function () {
          if (that.isSplitFlag == 1) {
            window.Viewer.camera.changed.removeEventListener(that.sdktool())
            window.Viewer.camera.changed.removeEventListener(that.sdktool());
          }
        })
        });
      let mapZoomAndMove = function (event) {
        var position = window.map.getView().getCenter()
        var position = window.map.getView().getCenter();

        // var pos = transform(position, 'EPSG:3857', 'EPSG:4326');
        var pos = position
        var level = that.getHeight(parseInt(window.map.getView().getZoom()))
        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),
        })
      }
        });
      };
      $("#map")
        .off()
        .on("mousemove", function () {
          if (that.isSplitFlag == 1) {
            that.olzoomAndMove(mapZoomAndMove)
            that.olzoomAndMove(mapZoomAndMove);
          }
        })
        .on("mouseout", function () {
          if (that.isSplitFlag == 1) {
            that.clearolzoomAndMove()
            that.clearolzoomAndMove();
          }
        })
        });
    },
    clearolzoomAndMove() {
      let registerOnZoomArr = window.map.get("registerOnZoom")
      let registerOnZoomArr = window.map.get("registerOnZoom");
      if (registerOnZoomArr && registerOnZoomArr.length > 0) {
        for (let i = 0; i < registerOnZoomArr.length; i++) {
          window.map.un("moveend", registerOnZoomArr[i])
          window.map.un("moveend", registerOnZoomArr[i]);
        }
      }
    },
    olzoomAndMove(eventListen, notListenMove) {
      // 记录地图缩放，用于判断拖动
      window.map.lastZoom =
        window.map.lastZoom || window.map.getView().getZoom()
        window.map.lastZoom || window.map.getView().getZoom();
      // 地图缩放事件
      let registerOnZoom = function (e) {
        // 不监听地图拖动事件
        if (notListenMove) {
          if (window.map.lastZoom != window.map.getView().getZoom()) {
            eventListen && eventListen(e)
            eventListen && eventListen(e);
          }
        } else {
          eventListen && eventListen(e)
          eventListen && eventListen(e);
        }
        window.map.lastZoom = window.map.getView().getZoom()
      }
        window.map.lastZoom = window.map.getView().getZoom();
      };
      // 保存缩放和拖动事件对象，用于后期移除
      let registerOnZoomArr = map.get("registerOnZoom") || []
      let registerOnZoomArr = map.get("registerOnZoom") || [];

      registerOnZoomArr.push(registerOnZoom)
      registerOnZoomArr.push(registerOnZoom);

      // 使用地图 set 方法保存事件对象
      window.map.set("registerOnZoom", registerOnZoomArr)
      window.map.set("registerOnZoom", registerOnZoomArr);

      // 监听地图移动结束事件
      window.map.on("moveend", registerOnZoom)
      window.map.on("moveend", registerOnZoom);

      return eventListen
      return eventListen;
    },
    sdktool() {
      if (this.isSplitFlag != 1) return
      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)
      if (this.isSplitFlag != 1) return;
      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);

      var value
      var value;
      // window.map
      //   .getView()
      //   .setCenter(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
      window.map.getView().setCenter([lng, lat])
      window.map.getView().setZoom(level)
      window.map.getView().setCenter([lng, lat]);
      window.map.getView().setZoom(level);
    },
    getLevel(height) {
      for (var i = 1, len = this.levelArray.length; i < len - 1; i++) {
        if (height >= (this.levelArray[i] + this.levelArray[i + 1]) / 2) {
          return i
          return i;
        }
      }
      return this.levelArray.length - 1
      return this.levelArray.length - 1;
    },
    getHeight(level) {
      if (level > 0 && level < 23) {
        return this.levelArray[level]
        return this.levelArray[level];
      }
      return this.levelArray[this.levelArray.length - 1]
      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);
      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);
        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.addOnlineOlMap &&
        this.$refs.addOnlineOlMap.close();
      this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.close();
    },
  },
  mounted() {
    this.$bus.$on("setChangeBaseMapLayer", (res) => {
      this.showBaseMapLayer(res)


    })
      this.showBaseMapLayer(res);
    });
    // 
    this.$bus.$on("changemap", e => {
    this.$bus.$on("changemap", (e) => {
      if (this.isSplitFlag == 1) {
        this.changeMap(3)
        this.changeMap(3);
      } else {
        this.changeMap(e)
        this.changeMap(e);
      }

    })
    });
  },
}
};
</script>

<style scoped>