/** * 多视口模式 * */ 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 }