| | |
| | | <div class="mapBox"> |
| | | <div v-if="isShow" id="dataCenterMap" class="ztzf-cesium"></div> |
| | | </div> |
| | | |
| | | </el-dialog> |
| | | </template> |
| | | |
| | |
| | | const restoreAllIcons = () => { |
| | | dataPointEntities.value.forEach(entity => { |
| | | if (entity.billboard) { |
| | | const status = entity?.properties?._customData?._value?.data.status; |
| | | entity.billboard.image = |
| | | props.dotData.resultType === 2 ? getEventImage(entity.status) : defaultIcon; |
| | | status === 1 || status === null ? defaultIcon : getEventImage(status); |
| | | } |
| | | }); |
| | | activeEntity.value = null; |
| | |
| | | // 恢复所有点的默认图标 |
| | | restoreAllIcons(); |
| | | if (currentClickEntity.billboard) { |
| | | const status = currentClickEntity?.properties?._customData?._value?.data.status; |
| | | currentClickEntity.billboard.image = |
| | | props.dotData.resultType === 2 ? getEventImage(currentClickEntity.status) : activeIcon; |
| | | status === 1 || status === null ? activeIcon : getEventActiveImage(status); |
| | | currentClickEntity.billboard.scale = 1; // 可选缩放效果 |
| | | activeEntity.value = currentClickEntity; |
| | | } |
| | | |
| | | removeLabel(); |
| | | viewer.scene.postRender.addEventListener(labelBoxUpdate); |
| | | }; |
| | |
| | | handler = new Cesium.ScreenSpaceEventHandler(viewer?.scene.canvas); |
| | | handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | }; |
| | | |
| | | // 清除所有数据点实体 |
| | | const clearDataPoints = () => { |
| | | if (!viewer) return; |
| | |
| | | dataPointEntities.value = []; |
| | | activeEntity.value = null; |
| | | }; |
| | | |
| | | const removeHandler = () => { |
| | | handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | handler?.destroy(); |
| | |
| | | |
| | | const renderDataPoint = mapList => { |
| | | if (!viewer || !mapList?.length) return; |
| | | |
| | | // 清除旧实体 |
| | | clearDataPoints(); |
| | | |
| | | // 添加新实体 |
| | | mapList.forEach((item, index) => { |
| | | const entity = viewer?.entities.add({ |
| | | id: `dataCenter-point-${index}-${Date.now()}`, |
| | |
| | | pixelOffset: new Cesium.Cartesian2(0, 55), |
| | | }, |
| | | billboard: { |
| | | image: props.dotData.resultType === 2 ? getEventImage(item.status) : defaultIcon, // 初始为默认图标 |
| | | image: item.status == null || item.status === 1 ? defaultIcon : getEventImage(item.status), // 初始为默认图标 |
| | | width: 40, |
| | | height: 40, |
| | | pixelOffset: new Cesium.Cartesian2(0, -15), |
| | |
| | | viewerRef.value = viewer; |
| | | |
| | | isViewerReady.value = true; |
| | | |
| | | // 初始化事件处理器 |
| | | handlerInit(); |
| | | isMapInitialized.value = true; |
| | | console.log('地图初始化完成'); |
| | | // 初始化后立即渲染已有数据 |
| | | if (dataPointList.value.length > 0) { |
| | | renderDataPoint(dataPointList.value); |
| | | } |
| | |
| | | try { |
| | | const res = await getMapInfoAPI(ids); |
| | | dataPointList.value = res.data.data || []; |
| | | console.log('dataPointList.value',dataPointList.value); |
| | | |
| | | // 确保地图已初始化后再渲染 |
| | | |
| | | if (isMapInitialized.value && viewer) { |
| | | renderDataPoint(dataPointList.value); |
| | | } |
| | |
| | | }; |
| | | const isViewerReady = ref(false); |
| | | |
| | | /** |
| | | * 初始化标注添加 |
| | | * @param data 数据 |
| | | */ |
| | | const initEntityOrPopup = data => { |
| | | //地图点在范围内 |
| | | watch( |
| | |
| | | } |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | |
| | | }); |
| | | onMounted(() => {}); |
| | | onBeforeUnmount(() => { |
| | | if (viewer) { |
| | | viewer.destroy(); |
| | | } |
| | | removeHandler(); |
| | | clearDataPoints(); |
| | | |
| | | }); |
| | | |
| | | // 暴露方法给父组件 |