代码迁移

src/Global/MapX/index.js

@@ -0,0 +1,170 @@
+import Tools from '../../Tools'
+import Event from '../../Event'
+
+let tools
+let Xevent
+let mapx = {}
+let curRectangle = undefined;
+let centerResult = undefined
+let mouseStart = false
+let syncObject = {}
+const init = (sdk) => {
+  tools = new Tools()
+  let div = document.createElement('div');
+  div.id = 'mapxDiv'
+  div.style.width = '222px';
+  div.style.height = '112px';
+  div.style.position = 'absolute';
+  div.style.right = '10px';
+  div.style.bottom = '82px';
+  div.style.zIndex = '1';
+  document.getElementById(sdk.div_id).appendChild(div)
+  let options = {
+    imageryProvider: new Cesium.TileMapServiceImageryProvider({
+      url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
+    }),
+    sceneMode: Cesium.SceneMode.SCENE2D,
+    // mapMode2D: Cesium.MapMode2D.ROTATE,
+    baseLayerPicker: false,
+    geocoder: false,
+    animation: false,
+    fullscreenButton: false,
+    navigationHelpButton: false,
+    // vrButton?: boolean;
+    homeButton: false,
+    infoBox: false,
+    sceneModePicker: false,
+    selectionIndicator: false,
+    timeline: false,
+    shouldAnimate: true
+  }
+  mapx.viewer = new Cesium.Viewer('mapxDiv', options);
+  mapx.viewer.camera.setView({
+    destination: Cesium.Cartesian3.fromDegrees(0, 0, 40000000),
+  })
+  mapx.viewer.trackedEntity = undefined;
+  mapx.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+  );
+  mapx.viewer.scene.screenSpaceCameraController.enableRotate = false;
+  mapx.viewer.scene.screenSpaceCameraController.enableTranslate = false;
+  mapx.viewer.scene.screenSpaceCameraController.enableZoom = false;
+  mapx.viewer.scene.screenSpaceCameraController.enableTilt = false;
+  mapx.viewer.scene.screenSpaceCameraController.enableLook = false;
+
+  // 创建范围框
+  let entity = mapx.viewer.entities.add({
+    name: 'mapX rectangle',
+    position: new Cesium.CallbackProperty(function () {
+      return (
+        centerResult || Cesium.Cartesian3.fromDegrees(0, 0, 0)
+      );
+    }, false),
+    rectangle: {
+      coordinates: new Cesium.CallbackProperty(function () {
+        return (
+          curRectangle || Cesium.Rectangle.fromDegrees(0.0, 0.0, 0.01, 0.01)
+        );
+      }, false),
+      material: Cesium.Color.RED.withAlpha(0.01),
+      outline: true,
+      outlineColor: Cesium.Color.RED,
+      outlineWidth: 2,
+      height: 1,
+    },
+    billboard: {
+      image: tools.getSourceRootPath() + '/img/cross.svg',
+      scale: 1,
+      width: 16,
+      height: 16
+    },
+  });
+  syncObject = { sdk, entity }
+  mapx.viewer.camera.percentageChanged = 0.001;
+  sdk.viewer.scene.preRender.addEventListener(syncViewer, syncObject); // 鹰眼与主图同步
+  let pick
+  Xevent = new Event({ viewer: mapx.viewer })
+  Xevent.mouse_left_down((movement, cartesian) => {
+    mouseStart = true
+    pick = mapx.viewer.scene.pick(movement.position)
+  })
+  Xevent.mouse_left_up((movement, cartesian) => {
+    mouseStart = false
+  })
+  Xevent.mouse_move((movement, cartesian) => {
+    if (pick && mouseStart) {
+      let sdkCH = tools.cartesian3Towgs84(sdk.viewer.camera.position, sdk.viewer).alt
+      let pos84 = tools.cartesian3Towgs84(cartesian, mapx.viewer)
+      // sdk.viewer.camera.position = Cesium.Cartesian3.fromDegrees(pos84.lng, pos84.lat, sdkCH)
+      sdk.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(pos84.lng, pos84.lat, sdkCH),
+        duration: 0
+      })
+    }
+  })
+}
+function syncViewer() {
+  if(!this.sdk || !this.sdk.viewer) {
+    return
+  }
+  // 视角中心点(伪)
+  centerResult = this.sdk.viewer.camera.pickEllipsoid(
+    new Cesium.Cartesian2(
+      this.sdk.viewer.canvas.clientWidth / 2,
+      this.sdk.viewer.canvas.clientHeight / (2 - ((90 + this.sdk.viewer.camera.pitch / (Cesium.Math.PI / 180)) / 110)),
+    ),
+  )
+  if (!centerResult) {
+    centerResult = this.sdk.viewer.camera.position
+  }
+  let height = tools.cartesian3Towgs84(this.sdk.viewer.camera.position, this.sdk.viewer).alt
+  let centerResult84 = tools.cartesian3Towgs84(centerResult, this.sdk.viewer)
+  let stepX = 120000
+  let stepY = 280000
+  if (height > 9000000) {
+    height = 9000000
+  }
+  if (height < 100000) {
+    this.entity.billboard.show = true
+    this.entity.rectangle.show = false
+  }
+  else {
+    this.entity.billboard.show = false
+    this.entity.rectangle.show = true
+  }
+  curRectangle = new Cesium.Rectangle(Cesium.Math.toRadians(centerResult84.lng - (height / stepX)), Cesium.Math.toRadians(centerResult84.lat - (height / stepY)), Cesium.Math.toRadians(centerResult84.lng + (height / stepX)), Cesium.Math.toRadians(centerResult84.lat + (height / stepY)))
+};
+function open(sdk) {
+  if (!mapx.viewer) {
+    init(sdk)
+  }
+  else {
+    mapx.viewer.container.style.display = 'block';
+    let entity
+    let entities = mapx.viewer.entities.values
+    for (let i = 0; i < entities.length; i++) {
+      if (entities[i].name === 'mapX rectangle') {
+        entity = entities[i]
+        break
+      }
+    }
+    sdk.viewer.scene.preRender.addEventListener(syncViewer, syncObject); // 鹰眼与主图同步
+  }
+}
+function close(sdk) {
+  if (!mapx.viewer) {
+    return
+  }
+  mapx.viewer.container.style.display = 'none';
+  let entity
+  let entities = mapx.viewer.entities.values
+  for (let i = 0; i < entities.length; i++) {
+    if (entities[i].name === 'mapX rectangle') {
+      entity = entities[i]
+      break
+    }
+  }
+  sdk.viewer.scene.preRender.removeEventListener(syncViewer, syncObject)
+}
+
+export { open, close }