sdk4.0/src/Global/MapX/index.js

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 }