diff --git a/src/components/LandMarkShow.vue b/src/components/LandMarkShow.vue index 9e9fa0f..961b14b 100644 --- a/src/components/LandMarkShow.vue +++ b/src/components/LandMarkShow.vue @@ -47,11 +47,13 @@ const nowImg = ref(); const judgmentUp = ref("dispaly:block;"); const judgmentDown = ref("dispaly:none;"); +//文本内容自适应照片宽度 const adaptive = (imgId) => { let newImg; setTimeout(() => { newImg = document.getElementById(imgId); }, 10); + //程序执行需要时间 setTimeout(() => { let newWidth = window.getComputedStyle(newImg, null)["width"]; let newMargin = window.getComputedStyle(newImg, null).marginLeft; diff --git a/src/components/Pin.vue b/src/components/Pin.vue index 6e9488b..5516b20 100644 --- a/src/components/Pin.vue +++ b/src/components/Pin.vue @@ -53,6 +53,7 @@ let Cesium = null, viewer = null, handler = null; +//标点动画 const animetion = () => { setInterval(() => { if (0.5 <= jump.value < 1.1 && jumpSwitch.value) { @@ -106,6 +107,7 @@ const insetLand = () => { }); } +//清除事件监听 const clearDiv = (id) => { viewer.scene.postRender.removeEventListener(addDynamicLabel); handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); @@ -121,6 +123,7 @@ const addDynamicLabel = (data) => { LandMarkWindow.windowShow = true; LandMarkWindow.hiddenWindow = false; let gisPosition = data.position._value; + //cesium 渲染事件监听 viewer.scene.postRender.addEventListener(() => { const canvasHeight = viewer.scene.canvas.height; const windowPosition = new Cesium.Cartesian2(); @@ -133,6 +136,7 @@ const addDynamicLabel = (data) => { const elWidth = 300; let showBottom = canvasHeight - windowPosition.y + 240 + "px"; let showLeft = windowPosition.x - elWidth / 2 + "px"; + //使弹窗跟随标点移动 LandMarkWindow.windowPosition.bottom = showBottom; LandMarkWindow.windowPosition.left = showLeft; const camerPosition = viewer.camera.position; @@ -153,6 +157,7 @@ const addDynamicLabel = (data) => { }); handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(function (movement) { + //点击空白处触发 LandMarkWindow.windowShow = false; LandMarkWindow.hiddenWindow = true; clearDiv(); @@ -175,8 +180,10 @@ watch(() => LandMarkWindow.flyToLand, (newValue, oldValue) => { const clickPin = () => { if (props.pintype == "landmark") { handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + //cesium 监听鼠标事件 handler.setInputAction(function (movement) { let pick = viewer.scene.pick(movement.position); + //点击标点时触发 if (Cesium.defined(pick) && pick.id.id) { let id = pick.id.id; let entiy = viewer.entities.getById(id);