| | |
| | | |
| | | |
| | | // 确定缩放比例 |
| | | const determineScaling = (currentState) => { |
| | | const determineScaling = () => { |
| | | // console.log('确定缩放比例'); |
| | | return () => { |
| | | if (!viewer) return |
| | | let height = viewer.camera.positionCartographic.height |
| | | // 根据高度展示对应的 gJson |
| | | for (let [index, item] of scalingJudgment.entries()) { |
| | | if (!item.show) return |
| | | if (height > item.value[0] && height <= item.value[1]) { |
| | | if (active === item.name) return |
| | | active = item.name |
| | | removeEntities() |
| | | removeLabel() |
| | | renderOutline(item) |
| | | if (!item.gJson && !item.splashedList?.length) return |
| | | item.gJson ? aggregation(item, currentState.flyTo) : splashed(item) |
| | | |
| | | currentState.flyTo && currentState.stopFlyTo && (currentState.flyTo = false) |
| | | break |
| | | } |
| | | if (!viewer) return |
| | | let height = viewer.camera.positionCartographic.height |
| | | // 根据高度展示对应的 gJson |
| | | for (let [index, item] of scalingJudgment.entries()) { |
| | | if (!item.show) return |
| | | if (height > item.value[0] && height <= item.value[1]) { |
| | | if (active === item.name) return |
| | | active = item.name |
| | | removeEntities() |
| | | removeLabel() |
| | | renderOutline(item) |
| | | if (!item.gJson && !item.splashedList?.length) return |
| | | item.gJson ? aggregation(item) : splashed(item) |
| | | break |
| | | } |
| | | } |
| | | } |
| | | |
| | | let currentState = { |
| | | flyTo: true, |
| | | stopFlyTo: false |
| | | } |
| | | const handlerDetermineScaling = () => determineScaling(currentState)() |
| | | |
| | | // 转换为目录结构, 返回数组, |
| | | function convertToHierarchy (code) { |
| | |
| | | } |
| | | |
| | | |
| | | let needFly = true |
| | | |
| | | watch( |
| | | selectedAreaCode, |
| | | async (newValue, oldValue) => { |
| | | needFly = true |
| | | if (!viewer) return |
| | | currentState.flyTo = true |
| | | |
| | | viewer.scene.postRender.removeEventListener(handlerDetermineScaling) |
| | | viewer.scene.postRender.removeEventListener(determineScaling) |
| | | initMapData(newValue).then(() => { |
| | | viewer.scene.postRender.addEventListener(handlerDetermineScaling) |
| | | viewer.scene.postRender.addEventListener(determineScaling) |
| | | }) |
| | | }, |
| | | { deep: true } |
| | |
| | | // 渲染轮廓 |
| | | const renderOutline = item => { |
| | | item.outline && |
| | | Cesium.GeoJsonDataSource.load(item.outline).then(dataSource => { |
| | | viewer.dataSources.add(dataSource) |
| | | const entities = dataSource.entities.values |
| | | entities.forEach(entity => { |
| | | // 隐藏多边形填充 |
| | | entity.polygon.material = Cesium.Color.TRANSPARENT |
| | | entity.polygon.outline = false // 关闭原生轮廓 |
| | | // 创建独立折线作为轮廓 |
| | | const positions = entity.polygon.hierarchy.getValue().positions |
| | | viewer.entities.add({ |
| | | polyline: { |
| | | positions: positions, |
| | | width: 5, // 直接设置宽度 |
| | | material: new Cesium.PolylineGlowMaterialProperty({ |
| | | glowPower: 0.5, |
| | | color: Cesium.Color.AQUA, |
| | | }), |
| | | clampToGround: true, // 贴地显示 |
| | | }, |
| | | }) |
| | | Cesium.GeoJsonDataSource.load(item.outline).then(dataSource => { |
| | | viewer.dataSources.add(dataSource) |
| | | const entities = dataSource.entities.values |
| | | entities.forEach(entity => { |
| | | // 隐藏多边形填充 |
| | | entity.polygon.material = Cesium.Color.TRANSPARENT |
| | | entity.polygon.outline = false // 关闭原生轮廓 |
| | | // 创建独立折线作为轮廓 |
| | | const positions = entity.polygon.hierarchy.getValue().positions |
| | | viewer.entities.add({ |
| | | polyline: { |
| | | positions: positions, |
| | | width: 5, // 直接设置宽度 |
| | | material: new Cesium.PolylineGlowMaterialProperty({ |
| | | glowPower: 0.5, |
| | | color: Cesium.Color.AQUA, |
| | | }), |
| | | clampToGround: true, // 贴地显示 |
| | | }, |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 聚合机巢 |
| | | const aggregation = (item, flyTo) => { |
| | | const aggregation = (item) => { |
| | | if (!item.gJson) return |
| | | const featuresList = item.gJson.features.map(item1 => { |
| | | // const {lng,lat} = getCenterPoint(item1.geometry.coordinates[0][0]) |
| | |
| | | entity.polygon.outline = false // 显示边框 |
| | | }) |
| | | |
| | | flyTo && viewer.flyTo(dataSource, { |
| | | needFly && viewer.flyTo(dataSource, { |
| | | offset: new Cesium.HeadingPitchRange( |
| | | 0, // heading: 0 (朝向不变) |
| | | Cesium.Math.toRadians(-60), // pitch: -90° (垂直向下) |
| | |
| | | ), |
| | | duration: 0.5, |
| | | }) |
| | | needFly = false |
| | | }) |
| | | } |
| | | |
| | |
| | | case 'deviceAggregation': |
| | | viewer.scene.postRender.addEventListener(labelBoxRender) |
| | | break |
| | | // todo 待对接 |
| | | case 'device': |
| | | store.commit('setSingleUavHome', { id: '123' }) |
| | | break |
| | |
| | | |
| | | // 移除所有监听事件,变量置空 |
| | | const removeAll = () => { |
| | | currentState.flyTo = false |
| | | |
| | | if (!viewer) return |
| | | removeEntities() |
| | | removeLabel() |
| | | // viewer.camera.moveEnd.removeEventListener(determineScaling); |
| | | viewer.scene.postRender.removeEventListener(handlerDetermineScaling) |
| | | viewer.scene.postRender.removeEventListener(determineScaling) |
| | | handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) |
| | | handler?.destroy() |
| | | viewer = null |
| | |
| | | currentEntity = null |
| | | } |
| | | const init = () => { |
| | | currentState.flyTo = true |
| | | currentState.stopFlyTo = true |
| | | |
| | | viewer = window.$viewer |
| | | viewer.scene.postRender.removeEventListener(handlerDetermineScaling) |
| | | viewer.scene.postRender.removeEventListener(determineScaling) |
| | | initMapData(selectedAreaCode.value || userAreaCode.value).then(() => { |
| | | viewer.scene.postRender.addEventListener(handlerDetermineScaling) |
| | | viewer.scene.postRender.addEventListener(determineScaling) |
| | | }) |
| | | handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) |
| | | handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK) |