feat:点击区域显示信息

张含笑

2025-10-31 783aea42531badecda5f5f0f0ddb7cf05c1ed1df

 src/views/layerManagement/index.vue

@@ -96,6 +96,7 @@
  fenceArea: 0, //围栏面积
  fileType: 1, //文件夹类型
  editFolderData: null,
  editingIsProhibited:false,//禁止编辑
});

const handleClick = tab => {
@@ -126,6 +127,8 @@
};
// 编辑围栏区域
const handleEdit = val => {
console.log('编辑数据',val);

  viewer.entities.removeAll();
  layerParams.value.editDetailData = val;
  drawPolygonExample.editThePatch(true);
@@ -137,7 +140,6 @@
// 编辑文件夹
const handleFolder = val => {
  layerParams.value.editFolderData = val;
  console.log('文件夹', layerParams.value.editFolderData);
};
// 新增开启绘制
const newFencesMethods = () => {
@@ -150,6 +152,7 @@
const parentMethod = () => {
  drawPolygonExample.delPolygon();
  drawPolygonExample.drawTheArea(false);
   viewer.entities.removeAll();
};
// 点击显示区域
const handleCoverDataUpdate = data => {
@@ -159,6 +162,11 @@
  } else {
    viewer.entities.removeAll();
  }
};
// 编辑围栏区域
const previewInformation = val => {
console.log('编辑数据',val);
  layerParams.value.editDetailData = val;
};
const loadDataToMap = dataList => {
  if (!viewer) return;
@@ -223,28 +231,33 @@
    ),
  });
};
// 围栏点击处理函数
// 区域点击显示详细信息
const handleFenceClick = movement => {
  if (!viewer) return;
  layerParams.value.editDetailData = null;
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.id?.customType === 'fence_polygon') {
    const selectedEntity = pickedObject.id;
    console.log('选中的围栏数据：', selectedEntity.customInfo);
    const selectedData = selectedEntity.customInfo; 
    viewer.entities.values.forEach(entity => {
  if (entity.customType === 'fence_polygon') {
    entity.polygon.material = entity === selectedEntity 
      ? Cesium.Color.RED.withAlpha(0.5) 
      : Cesium.Color.YELLOW.withAlpha(0.5);
  }
  });

    // // 1. 高亮处理（清除其他实体高亮，仅高亮当前选中）
    // viewer.entities.values.forEach(entity => {
    //   if (entity.customType === 'fence_polygon') {
    //     // 恢复默认样式
    //     entity.polygon.material =
    //       entity === selectedEntity
    //         ? selectedEntity.polygon.material.color.withAlpha(0.8) // 选中时加深透明度
    //         : selectedEntity.polygon.material.color.withAlpha(0.5); // 未选中恢复默认
    //   }
    // });

    // 2. 联动右侧编辑组件（假设 rightEdit 有接收数据的方法）
    // 例如：通过 ref 调用 rightEdit 的 setData 方法
    // rightEditRef.value?.setData(selectedEntity.customInfo);
    layerParams.value.editNest = true; // 显示右侧编辑组件
    layerParams.value.decideWhetherToAddOrEdit = 2; // 标记为编辑模式
    // 根据围栏类型设置fenceType
    if (activeName.value === '电子围栏') {
      layerParams.value.fenceType = 1;
    } else if (activeName.value === '自定义禁飞区') {
      layerParams.value.fenceType = 2;
    }
     layerParams.value.editDetailData = selectedData;
     layerParams.value.fenceArea = selectedData.area;
     layerParams.value.editingIsProhibited = true
  }
};
let publicCesiumInstance = null;
@@ -301,7 +314,7 @@
    });
  }

  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);  
  let polygonString = JSON.stringify(polygon);
  layerParams.value.polygonPosition = polygonString;
  if (polygon.length >= 3) {