项目管理界面优化，字典管理页面左侧树界面优化，数据上传版本显示错误优化，综合展示二三维切换效果优化

Surpriseplus

2023-02-28 cbc4fc2e4dce714c5d5723746368266915868007

 src/components/MapDiv.vue

@@ -10,10 +10,13 @@
    >
      <mapsdk></mapsdk>
    </div>
    <div id="ds" v-show="isShowDs"></div>
    <div
      id="ds"
      v-show="isShowDs"
    ></div>
    <!--openLayers显示界面-->
    <div
      v-if="isOlMapFlag"
      v-show="isOlMapFlag"
      id="map"
      class="olMap"
      :class="[isShowOlMap ? 'olMapTwo' : 'olMapOne']"
@@ -24,11 +27,11 @@
</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"
export default {
  name: "",
  components: {
@@ -48,162 +51,195 @@
        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

          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;
          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;
      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 pos = transform(position, "EPSG:3857", "EPSG:4326");
        var level = that.getHeight(parseInt(window.map.getView().getZoom()));
        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()))

        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);
      window.map
        .getView()
        .setCenter(transform([lng, lat], "EPSG:4326", "EPSG:3857"));
      window.map.getView().setZoom(level);
      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)
    },
    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]
    },
  },
  mounted() {
    this.$bus.$on("changemap", (e) => {
      if (e == "分屏") {
        this.changeMap(1);
      } else if (e == "二维") {
        this.changeMap(2);
      } else if (e == "三维") {
        this.changeMap(3);
    this.$bus.$on("changemap", e => {
      if (this.isSplitFlag == 1) {
        this.changeMap(3)
      } else {
        this.changeMap(e)
      }
    });

    })
  },
};
}
</script>

<style scoped>
.myDiv {
  width: 100%;
  height: 88%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;