| | |
| | | { name: '国', value: [1169651, 37962800], gJson: zg }, |
| | | ]; |
| | | let viewer = null; |
| | | const active = ref(''); |
| | | let active = null; |
| | | let handler = null; |
| | | let positionC3 = null; |
| | | const init = () => { |
| | | const listenerHeight = () => { |
| | | determineScaling(); |
| | | viewer.camera.moveEnd.addEventListener(() => { |
| | | determineScaling(); |
| | |
| | | |
| | | // 确定缩放比例 |
| | | const determineScaling = () => { |
| | | if(!viewer) return |
| | | let height = viewer.camera.positionCartographic.height; |
| | | // 根据高度展示对应的 gJson |
| | | for (let item of scalingJudgment) { |
| | | if (height > item.value[0] && height <= item.value[1]) { |
| | | if (active.value !== item.name) { |
| | | if (active !== item.name) { |
| | | removeEntities(); |
| | | removeLabel(); |
| | | active.value = item.name; |
| | | active = item.name; |
| | | item.gJson ? aggregation(item) : splashed(); |
| | | } |
| | | break; |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 获取弹框box |
| | | const getLabelDom = () => { |
| | | const vNode = h(MapPopUpBox, { data: '参数', removeLabel }); |
| | | const tooltipContainer = document.createElement('div'); |
| | |
| | | return tooltipContainer; |
| | | }; |
| | | |
| | | // 弹框位置刷新 |
| | | const labelBox = () => { |
| | | let dom = document.querySelector('#mapPopUpBox'); |
| | | if (!dom) { |
| | |
| | | } |
| | | }; |
| | | |
| | | const clickFun = click => { |
| | | // 左键单机事件 |
| | | const singleMachineEvent = click => { |
| | | const pickedObject = viewer.scene.pick(click.position); |
| | | if (Cesium.defined(pickedObject) && pickedObject.id) { |
| | | const entity = pickedObject.id; |
| | |
| | | } |
| | | }; |
| | | |
| | | // 移除 点 和 gjson 实体 |
| | | const removeEntities = () => { |
| | | viewer.dataSources.removeAll(true); |
| | | viewer.entities.removeAll(); |
| | | viewer.dataSources?.removeAll(true); |
| | | viewer.entities?.removeAll(); |
| | | }; |
| | | // 移除弹框标签 |
| | | const removeLabel = () => { |
| | | viewer.scene.postRender.removeEventListener(labelBox); |
| | | const dom = document.querySelector('#mapPopUpBox'); |
| | |
| | | } |
| | | }; |
| | | |
| | | onBeforeUnmount(() => { |
| | | const removeAll = () => { |
| | | removeEntities(); |
| | | removeLabel(); |
| | | handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | handler?.destroy(); |
| | | }); |
| | | viewer = null; |
| | | active = null |
| | | handler = null; |
| | | positionC3 = null; |
| | | }; |
| | | const init = () => { |
| | | viewer = window.$viewer; |
| | | handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); |
| | | handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | listenerHeight(); |
| | | }; |
| | | // onMounted(() => { |
| | | // nextTick(() => { |
| | | // viewer = window.$viewer; |
| | | // handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); |
| | | // handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | // listenerHeight(); |
| | | // }); |
| | | // }); |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | viewer = window.$viewer; |
| | | handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); |
| | | handler.setInputAction(clickFun, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | init(); |
| | | }); |
| | | }); |
| | | return { init,removeAll }; |
| | | }; |