Files
sdk4.0/src/Global/MultiViewportMode/index.js
2025-08-26 15:44:57 +08:00

636 lines
21 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 多视口模式
* */
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'
import { getLeftClickState, getRightClickState, getMoveState } from "../../Global/ClickCallback"
import { openLeftClick, openRightClick, openMove } from "./ClickCallback"
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
if(getLeftClickState()) {
openLeftClick(sdk2D)
}
if(getRightClickState()) {
openRightClick(sdk2D)
}
if(getMoveState()) {
openMove(sdk2D)
}
// 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)
if(imageryLayers[i]._id) {
entity._id = imageryLayers[i]._id
}
entity.show = imageryLayers[i].show
entity.alpha = imageryLayers[i].alpha
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' && that.type !== 'wallStereoscopic')) {
if (that.showView == 3) {
options.show = false
}
let callback
if(that.type === 'TextBox') {
callback = that.callback
}
let newObject = await new that.constructor(sdk2D, options, callback)
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' && obj.type !== 'wallStereoscopic')) {
if (obj.showView == 3) {
options.show = false
}
let target = await sdk2D.entityMap.get(options.id)
if(target) {
await target.remove()
}
let callback
if(obj.type === 'TextBox') {
callback = obj.callback
}
target = await new obj.constructor(sdk2D, options, callback)
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 }