发布管理修改

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 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: '',
  name: "",

  components: {
    mapsdk,
    mapol,
    AddOnlineMap,
    AddOnlineOlMap
  },
  data() {
    return {
@@ -51,156 +59,210 @@
        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();
          }, 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;
          break;
          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
      }
    },
    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;
      $('#mapView')
      var that = this
      $("#mapView")
        .off()
        .on('mousemove', function () {
        .on("mousemove", function () {
          if (that.isSplitFlag == 1) {
            window.Viewer.camera.changed.addEventListener(that.sdktool());
            window.Viewer.camera.changed.addEventListener(that.sdktool())
          }
        })
        .on('mouseout', function () {
        .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')
        })
      }
      $("#map")
        .off()
        .on('mousemove', function () {
        .on("mousemove", function () {
          if (that.isSplitFlag == 1) {
            that.olzoomAndMove(mapZoomAndMove);
            that.olzoomAndMove(mapZoomAndMove)
          }
        })
        .on('mouseout', function () {
        .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
      // 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);
      }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('changemap', (e) => {
      this.changeMap(e);
    });
    this.$bus.$on("setChangeBaseMapLayer", (res) => {
      this.showBaseMapLayer(res)


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

    })
  },
};
}
</script>

<style scoped>
@@ -222,7 +284,7 @@
  width: 100%;
}
.sdkMapTwo {
  width: calc(50% - 1px);
  width: calc(50% - 2px);
}
.olMap {
  height: 100%;
@@ -234,7 +296,7 @@
  width: 100%;
}
.olMapTwo {
  width: calc(50% - 1px);
  width: calc(50% - 2px);
}
#ds {
  height: 100%;