1

Surpriseplus

2022-11-29 271d931fc950745d37554528324cbc8a636d85c3

 src/components/MapDiv.vue

@@ -24,13 +24,13 @@
</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: "",
  name: '',
  components: {
    mapsdk,
    mapol,
@@ -88,44 +88,44 @@
    },
    showSplitMap() {
      var that = this;
      $("#mapView")
      $('#mapView')
        .off()
        .on("mousemove", function () {
        .on('mousemove', function () {
          if (that.isSplitFlag == 1) {
            window.Viewer.camera.changed.addEventListener(that.sdktool());
          }
        })
        .on("mouseout", function () {
        .on('mouseout', function () {
          if (that.isSplitFlag == 1) {
            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 pos = transform(position, 'EPSG:3857', 'EPSG:4326');
        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);
          }
        })
        .on("mouseout", function () {
        .on('mouseout', function () {
          if (that.isSplitFlag == 1) {
            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]);
        }
      }
    },
@@ -146,15 +146,15 @@
        window.map.lastZoom = window.map.getView().getZoom();
      };
      // 保存缩放和拖动事件对象，用于后期移除
      let registerOnZoomArr = map.get("registerOnZoom") || [];
      let registerOnZoomArr = map.get('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;
    },
@@ -168,7 +168,7 @@
      var level = this.getLevel(cartographic.height);
      window.map
        .getView()
        .setCenter(transform([lng, lat], "EPSG:4326", "EPSG:3857"));
        .setCenter(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'));
      window.map.getView().setZoom(level);
    },
    getLevel(height) {
@@ -187,14 +187,8 @@
    },
  },
  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) => {
      this.changeMap(e);
    });
  },
};
@@ -203,7 +197,7 @@
<style scoped>
.myDiv {
  width: 100%;
  height: 88%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;