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

/**
 * 多视口模式 
 * */
import Tools from "../../Tools";
import MouseEvent from '../../Event'
import { CesiumContainer } from '../global'
import { off as offSplitScreen } from "../SplitScreen";
import { FlwStatusSwitch, JwwStatusSwitch, getFlwStatus, getJwwStatus } from "../global"
import { SheetIndexStatusSwitch, getStatus } from '../SheetIndex'

let sdk2D
let sdk3D
let activeViewer
let controlViewer
let syncObject = {}
let handlers = []
async function init(sdk) {
  sdk3D = sdk
  activeViewer = 0
  let tools = new Tools()
  let sdk2 = await new YJ.YJEarth(sdk.div_id)
  sdk2.viewer._element.className = 'cesium-viewer 2d'
  SheetIndexStatusSwitch(sdk2, getStatus())
  // setTimeout(() => {
  //   let switchCluster = new YJ.Global.switchCluster(sdk2, true)
  // }, 500);
  CesiumContainer(sdk2, {
    compass: false, // 罗盘
    // legend: false, // 比例尺
    info: false, // 信息栏
    frame: false // 刷新率
  })
  sdk2.viewer.scene.mode = Cesium.SceneMode.SCENE2D
  sdk2D = await sdk2
  // window.sdk2D = sdk2D
  solveBug()
  syncObject = { sdks: [sdk, sdk2], tools }
  await eventBind(sdk, 0, syncObject)
  await eventBind(sdk2, 1, syncObject)
  await syncData(sdk)
  sdk.viewer.scene.preRender.addEventListener(syncViewer, syncObject)

  sdk.viewer.imageryLayers.layerAdded.addEventListener(syncImageryLayerAdded);
  sdk.viewer.imageryLayers.layerMoved.addEventListener(syncImageryLayerMoved);
  sdk.viewer.imageryLayers.layerRemoved.addEventListener(syncImageryLayerRemoved);
  sdk.viewer.imageryLayers.layerShownOrHidden.addEventListener(syncImageryLayerShownOrHidden);
  let imageryLayers = [...sdk.viewer.imageryLayers._layers]
  imageryLayers.sort((a, b) => a._layerIndex - b._layerIndex);
  sdk2D.viewer.imageryLayers.removeAll()
  for (let i = 0; i < imageryLayers.length; i++) {
    let entity = sdk2D.viewer.imageryLayers.addImageryProvider(imageryLayers[i].imageryProvider, imageryLayers[i]._layerIndex)
    entity.show = imageryLayers[i].show
    if (imageryLayers[i]._objectState) {
      if (imageryLayers[i]._showView == 3) {
        entity.show = false
      }
    }
  }
  // sdk.viewer.entities.collectionChanged.addEventListener(syncEntities)
  // sdk.viewer.dataSources.dataSourceAdded.addEventListener(syncDataSources)

  if (getFlwStatus(sdk)) {
    FlwStatusSwitch(sdk2, true)
  }
  if (getJwwStatus(sdk)) {
    JwwStatusSwitch(sdk2, true)
  }

  sdk.entityMap.forEach((item, key) => {
    if (item.showView == 2) {
      item.showView = 2
    }
  })

}
async function on(sdk) {
  if (sdk2D) {

  }
  else {
    init(sdk)
    offSplitScreen()
  }
}

function off(sdk) {
  sdk.viewer.scene.preRender.removeEventListener(syncViewer, syncObject)
  sdk.viewer.imageryLayers.layerAdded.removeEventListener(syncImageryLayerAdded);
  sdk.viewer.imageryLayers.layerMoved.removeEventListener(syncImageryLayerMoved);
  sdk.viewer.imageryLayers.layerRemoved.removeEventListener(syncImageryLayerRemoved);
  sdk.viewer.imageryLayers.layerShownOrHidden.removeEventListener(syncImageryLayerShownOrHidden);
  // sdk.viewer.entities.collectionChanged.removeEventListener(syncEntities)
  // sdk.viewer.dataSources.dataSourceAdded.removeEventListener(syncDataSources)

  //primitiveAdded=undefined基元同步设置在add位置
  // sdk.viewer.scene.primitives.primitiveAdded.removeEventListener(syncPrimitivesAdded)
  for (let i = 0; i < handlers.length; i++) {
    handlers[i].destroy()
  }
  if (sdk2D) {
    sdk2D.destroy()
    handlers = []
    sdk2D = null
    sdk3D = null
    activeViewer = null
    syncObject = {}
  }
  sdk.entityMap.forEach((item, key) => {
    if (item.showView) {
      item.show = item.show
    }
  })
}

async function syncData2(sdk, id, entityId) {
  if (sdk && sdk.viewer && sdk.viewer._element && sdk.viewer._element.className === 'cesium-viewer 2d') {
    return
  }
  if (!sdk3D || !sdk2D) {
    return
  }
  let entityMap = sdk3D.entityMap
  if (id) {
    let that = entityMap.get(id)
    if (that) {
      let that2 = sdk2D.entityMap.get(id)
      if (that2) {
        await that2.remove()
      }
      let options = syncObject.tools.deepCopyObj(that.options)
      if (that.type === 'BillboardObject') {
        options.heightReference = 1
      }
      if (that.type === 'PolygonObject') {
        options.heightMode = 0
        options.height = 0
      }

      if (!that.type || (that.type !== 'tileset' && that.type !== 'bim' && that.type !== 'glb' && that.type !== 'layer')) {
        if (that.showView == 3) {
          options.show = false
        }
        let newObject = await new that.constructor(sdk2D, options)
        newObject.onClick = that.onClick
        newObject.onRightClick = that.onRightClick
        newObject.onMouseMove = that.onMouseMove
        if (that.type === 'TrajectoryMotion') {
          that.firstPersonView = false
          if (that.TweenAnimate) {
            let state = that.state
            if (state) {
              that.state = false
            }
            if (!newObject.state) {
              setTimeout(() => {
                newObject.setMovePositionByDistance(Number(that.TweenAnimate._object.distance.toFixed(8)) + 0.00000001)
                setTimeout(() => {
                  newObject.setMovePositionByDistance(Number(that.TweenAnimate._object.distance.toFixed(8)) + 0.00000002)
                }, 500);
              }, 500);
            }
            else {
              newObject.setMovePositionByDistance(Number(that.TweenAnimate._object.distance.toFixed(8)))
            }
            that.state = state
          }
          else {
            setTimeout(() => {
              newObject.setMovePositionByDistance(0.00000001)
              setTimeout(() => {
                newObject.setMovePositionByDistance(0.00000002)
              }, 500)
            }, 500)
          }
          if (that.viewFollow) {
            newObject.viewFollow = true
          }
        }
        if (that.type === 'AttackArrowObject' || that.type === 'StraightArrowObject') {
          if (that.spreadState && that.TweenAnimate && that.TweenAnimate._object) {
            newObject.setSpreadProgressByTime(that.TweenAnimate._object.distance / that.TweenAnimate._valuesEnd.distance * that.spreadTime)
          }
        }
        if (that.type === 'PincerArrowObject') {
          if (that.spreadState && that.TweenAnimate && that.TweenAnimate._object) {
            newObject.setSpreadProgressByTime(that.TweenAnimate._object.distance1 / that.TweenAnimate._valuesEnd.distance1 * that.spreadTime)
          }
        }
        if (newObject.on && newObject.type !== 'glb') {
          if (newObject.type === 'vector') {
            newObject.data = that.data
            newObject.load(() => {
              if (newObject.entity) {
                for (let i = 0; i < newObject.entity.entities.values.length; i++) {
                  newObject.entity.entities.values[i].show = that.entity.entities.values[i]._customShow === false ? false : true
                }
              }
            })
          }
          await newObject.on()
        }
        // if (newObject.type && (newObject.type === 'tileset' || newObject.type === 'bim')) {
        //   newObject.height = -10000
        // }
        // // Cesium1.98版本二维模式下初次显示有问题，1.110以上版本正常
        // if (newObject.type && (newObject.type === 'glb')) {
        //   newObject.options.position.alt = 0
        // }
      }
    }
    else {
      let that2 = sdk2D.entityMap.get(id)
      if (that2) {
        await that2.remove()
      }
    }
  }
  else {
    for (let [key, obj] of sdk2D.entityMap) {
      let that = sdk2D.entityMap.get(key)
      if (that) {
        await that.remove()
      }
    }
    for (let [key, obj] of entityMap) {
      if (obj.type === 'BillboardObject') {
        obj.options.heightReference = 1
      }
      let options = syncObject.tools.deepCopyObj(obj.options)
      if (!obj.type || (obj.type !== 'tileset' && obj.type !== 'bim' && obj.type !== 'glb' && obj.type !== 'layer')) {
        if (obj.showView == 3) {
          options.show = false
        }
        let target = await sdk2D.entityMap.get(options.id)
        if(target) {
          await target.remove()
        }
        target = await new obj.constructor(sdk2D, options)
        target.onClick = obj.onClick
        target.onRightClick = obj.onRightClick
        target.onMouseMove = obj.onMouseMove
        if (obj.type === 'TrajectoryMotion') {
          obj.firstPersonView = false
          if (obj.TweenAnimate) {
            let state = obj.state
            if (state) {
              obj.state = false
            }
            if (!target.state) {
              setTimeout(() => {
                target.setMovePositionByDistance(Number(obj.TweenAnimate._object.distance.toFixed(8)) + 0.000000001)
                setTimeout(() => {
                  target.setMovePositionByDistance(Number(obj.TweenAnimate._object.distance.toFixed(8)) + 0.000000002)
                }, 1500);
              }, 1500);
            }
            else {
              target.setMovePositionByDistance(Number(obj.TweenAnimate._object.distance.toFixed(8)))
            }
            obj.state = state
          }
          else {
            setTimeout(() => {
              target.setMovePositionByDistance(0.000000001)
              setTimeout(() => {
                target.setMovePositionByDistance(0.000000002)
              }, 1500);
            }, 1500);
          }
          if (obj.viewFollow) {
            target.viewFollow = true
          }
          // else {
          //   newObject.viewFollow = false
          // }
        }
        if (obj.type === 'AttackArrowObject' || obj.type === 'StraightArrowObject') {
          if (obj.spreadState && obj.TweenAnimate && obj.TweenAnimate._object) {
            target.setSpreadProgressByTime(obj.TweenAnimate._object.distance / obj.TweenAnimate._valuesEnd.distance * obj.spreadTime)
          }
        }
        if (obj.type === 'PincerArrowObject') {
          if (obj.spreadState && obj.TweenAnimate && obj.TweenAnimate._object) {
            target.setSpreadProgressByTime(obj.TweenAnimate._object.distance1 / obj.TweenAnimate._valuesEnd.distance1 * obj.spreadTime)
          }
        }
        if (target.on && obj.type !== 'glb') {
          if (target.type === 'vector') {
            target.data = obj.data
            target.load(() => {
              if (target.entity) {
                for (let i = 0; i < target.entity.entities.values.length; i++) {
                  target.entity.entities.values[i].show = obj.entity.entities.values[i]._customShow === false ? false : true
                }
              }
            })
          }
          await target.on()
        }
        // if (obj.type && (obj.type === 'tileset' || obj.type === 'bim')) {
        //   target.height = -10000
        // }
        // if (obj.type && (obj.type === 'glb')) {
        //   target.options.position.alt = 0
        // }
      }
    }
  }
}

async function syncData(sdk, id, entityId) {
  syncData2(sdk, id, entityId)
  // syncEntities()
  // syncDataSources()
}

function syncEntities(entities1, entities2) {
  if (!sdk3D) {
    return
  }
  if (sdk2D) {
    if (Array.isArray(entities1) || Array.isArray(entities2)) {
      entities1 = null
      entities2 = null
    }
    if (!entities1) {
      entities1 = sdk2D.viewer.entities
    }
    if (!entities2) {
      entities2 = sdk3D.viewer.entities
    }
    let entities2D = entities1
    let entities3D = entities2
    for (let i = entities2D.values.length - 1; i >= 0; i--) {
      let flag = false
      for (let m = entities3D.values.length - 1; m >= 0; m--) {
        if (entities2D.values[i].id === entities3D.values[m].id) {
          flag = true
          entities2D.values[i] === entities3D.values[m]
        }
      }
      if (!flag) {
        entities2D.remove(entities2D.values[i])
      }
    }
    for (let m = entities3D.values.length - 1; m >= 0; m--) {
      let flag = false
      for (let i = entities2D.values.length - 1; i >= 0; i--) {
        if (entities2D.values[i].id === entities3D.values[m].id) {
          flag = true
          break
        }
      }
      if (!flag) {
        let entity = entities2D.add(entities3D.values[m])
        // if (entity.rectangle) {
        //   // 设置高度，否则在某些位置无法显示，但色彩会变暗
        //   entity.rectangle.height = 0
        //   console.log('242342354235',entities3D.values[m])
        // }
      }
    }
  }
}
function syncDataSources(dataSources, type) {
  if (!sdk3D) {
    return
  }
  if (sdk2D) {
    let dataSources2D = sdk2D.viewer.dataSources
    if (dataSources) {
      for (let i = dataSources2D._dataSources.length - 1; i >= 0; i--) {
        if (dataSources2D._dataSources[i].name === dataSources.name) {
          if (type === 'entities') {
            syncEntities(dataSources2D._dataSources[i].entities, dataSources.entities)
          }
          if (type === 'clustering') {
            dataSources2D._dataSources[i].clustering.enabled = dataSources.clustering.enabled
          }
        }
      }
    }
    // for (let m = dataSources3D._dataSources.length - 1; m >= 0; m--) {
    //   let flag = false
    //   for (let i = dataSources2D._dataSources.length - 1; i >= 0; i--) {
    //     console.log(dataSources2D._dataSources[i].name, dataSources3D._dataSources[m].name)
    //     if (dataSources2D._dataSources[i].name === dataSources3D._dataSources[m].name) {
    //       flag = true
    //       break
    //     }
    //   }
    //   if (!flag) {
    //     dataSources2D.add(dataSources3D._dataSources[m])
    //   }
    // }
  }
}
function syncImageryLayerAdded(layer, index) {
  sdk2D.viewer.imageryLayers.addImageryProvider(layer.imageryProvider, index)
}
function syncImageryLayerMoved(layer, newindxe, oldindex) {
  let layer2d = sdk2D.viewer.imageryLayers._layers[oldindex]
  if (!layer2d) {
    return
  }
  // 移到最底层
  if (newindxe === 0) {
    sdk2D.viewer.imageryLayers.lowerToBottom(layer2d)
  }
  // 移到最高层
  else if (newindxe === sdk3D.viewer.imageryLayers._layers.length - 1) {
    sdk2D.viewer.imageryLayers.raiseToTop(layer2d)
  }
  else {
    if (newindxe < oldindex) {
      sdk2D.viewer.imageryLayers.lower(layer2d)
    }
    else {
      sdk2D.viewer.imageryLayers.raise(layer2d)
    }
  }
}
function syncImageryLayerRemoved(layer, index) {
  let layer2d = sdk2D.viewer.imageryLayers._layers[index]
  if (!layer2d) {
    return
  }
  sdk2D.viewer.imageryLayers.remove(layer2d)
}
function syncImageryLayerShownOrHidden(layer, index, state) {
  return
  let layer2d = sdk2D.viewer.imageryLayers._layers[index]
  let layer3d = sdk3D.viewer.imageryLayers._layers[index]
  console.log('layer2d', layer2d, sdk2D, layer3d)

  if (!layer2d) {
    return
  }
  if (layer3d._objectState) {
    if (!layer3d._showView || layer3d._showView == 2) {
      layer2d.show = true
    }
    if (layer3d._showView == 3) {
      layer2d.show = false
    }
  }
  else {
    layer2d.show = state
  }
}

async function syncPrimitives(primitive) {
  if (!sdk3D) {
    return
  }
  if (sdk2D) {
    // await sdk2D.viewer.scene.primitives.remove(primitive)
    // await sdk2D.viewer.scene.primitives.add(primitive)
    let primitives2D = sdk2D.viewer.scene.primitives._primitives
    let primitives3D = sdk3D.viewer.scene.primitives._primitives
    // console.log(primitives2D, primitives3D)
    // setTimeout(() => {
    //   sdk2D.viewer.scene.primitives._primitives[1] = sdk3D.viewer.scene.primitives._primitives[1]
    // }, 2000);
    for (let i = primitives2D.length - 1; i >= 1; i--) {
      let flag = false
      for (let m = primitives3D.length - 1; m >= 1; m--) {
        if (primitives3D[m].id && primitives2D[m].id && (primitives3D[m].id === primitives2D[i].id)) {
          flag = true
        }
      }
      if (!flag) {
        sdk2D.viewer.scene.primitives.remove(primitives2D[i])
      }
    }
    for (let m = primitives3D.length - 1; m >= 1; m--) {
      let flag = false
      for (let i = primitives2D.length - 1; i >= 1; i--) {
        if (primitives3D[m].id && primitives2D[m].id && (primitives3D[m].id === primitives2D[i].id)) {
          flag = true
          primitives2D[i].show = primitives3D[m].show
          primitives2D[i].startColor = primitives3D[m].startColor
          primitives2D[i].endColor = primitives3D[m].endColor
          primitives2D[i].minimumSpeed = primitives3D[m].minimumSpeed
          primitives2D[i].maximumSpeed = primitives3D[m].maximumSpeed
          primitives2D[i].minimumParticleLife = primitives3D[m].minimumParticleLife
          primitives2D[i].maximumParticleLife = primitives3D[m].maximumParticleLife
          primitives2D[i].startScale = primitives3D[m].startScale
          primitives2D[i].endScale = primitives3D[m].endScale
          primitives2D[i].emissionRate = primitives3D[m].emissionRate
          primitives2D[i].particleSize = primitives3D[m].particleSize
          primitives2D[i].modelMatrix = primitives3D[m].modelMatrix
        }
      }
      if (!flag) {
        sdk2D.viewer.scene.primitives.add(primitives3D[m])
      }
    }
  }
}

function eventBind(sdk, i, syncObject) {
  let handler = new Cesium.ScreenSpaceEventHandler(
    sdk.viewer.canvas
  )
  handler.setInputAction(() => {
    activeViewer = i
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
  handler.setInputAction(() => {
    activeViewer = i
  }, Cesium.ScreenSpaceEventType.RIGHT_DOWN)
  handler.setInputAction(() => {
    activeViewer = i
  }, Cesium.ScreenSpaceEventType.WHEEL)
  handlers.push(handler)
}

function syncViewer() {
  let sdk = this.sdks[activeViewer]
  let sdk2

  if (activeViewer === 0) {
    sdk2 = this.sdks[1]
  }
  else if (activeViewer === 1) {
    sdk2 = this.sdks[0]
  }
  // this.sdks[0].viewer.trackedEntity = null
  // this.sdks[1].viewer.trackedEntity = null
  if (sdk.viewer.scene.mode === 2) {
    if (this.sdks[0].viewer.trackedEntity) {
      let distance = sdk.viewer.camera.positionCartographic.height
      sdk2.viewer.camera.lookAt(
        Cesium.Cartesian3.fromRadians(sdk.viewer.camera.positionCartographic.longitude, sdk.viewer.camera.positionCartographic.latitude, 0),
        new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), distance)
      )
    }
    else {
      if (this.sdks[1].viewer.trackedEntity) {
        this.sdks[1].viewer.entities.remove(this.sdks[1].viewer.trackedEntity)
        this.sdks[1].viewer.trackedEntity = null
      }
      let centerResult84 = this.tools.cartesian3Towgs84(Cesium.Cartesian3.fromRadians(sdk.viewer.camera.positionCartographic.longitude, sdk.viewer.camera.positionCartographic.latitude, sdk.viewer.camera.positionCartographic.height), sdk.viewer)
      sdk2.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(centerResult84.lng, centerResult84.lat, centerResult84.alt),
      })
    }
  }
  else {
    // 视角中心点(伪)
    let centerResult = sdk.viewer.camera.pickEllipsoid(
      new Cesium.Cartesian2(
        sdk.viewer.canvas.clientWidth / 2,
        sdk.viewer.canvas.clientHeight / (2 - ((90 + sdk.viewer.camera.pitch / (Cesium.Math.PI / 180)) / 110)),
      ),
    )
    if (!centerResult) {
      centerResult = sdk.viewer.camera.positionWC
    }

    let height = this.tools.cartesian3Towgs84(sdk.viewer.camera.positionWC, sdk.viewer).alt
    let centerResult84 = this.tools.cartesian3Towgs84(centerResult, sdk.viewer)

    // console.log('--------------', sdk.viewer.camera.position, sdk.viewer.camera.positionWC, centerResult84, height)

    sdk2.viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(centerResult84.lng, centerResult84.lat, height),
      // orientation: {
      //   heading: sdk2.viewer.camera.heading,
      //   pitch: sdk2.viewer.camera.pitch,
      //   roll: sdk2.viewer.camera.roll
      // }
    })
  }


}


function get2DView() {
  return sdk2D
}

function get3DView() {
  return sdk3D
}

function solveBug() {
  // 在能显示的地方加载一个多边形，解决二维模式下某些地方无法显示多边形的bug，原因不明
  sdk2D && sdk2D.viewer.entities.add({
    show: false,
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([100, 50, 100.0001, 50, 100.0001, 50.0001]))
    }
  })
}

function setActiveViewer(v) {
  activeViewer = v
}

function getSdk() {
  return {
    sdkP: sdk3D,
    sdkD: sdk2D
  }
}


export { on, off, syncData, syncEntities, syncDataSources, syncPrimitives, get2DView, get3DView, setActiveViewer, getSdk }