feat:渲染数据

张含笑

2025-10-28 0f16db42e4e331bfaf084c27ca602c275e87668d

feat:渲染数据

 src/views/layerManagement/index.vue

@@ -18,6 +18,7 @@
</template>

<script setup>
import { flyVisual } from '@/utils/cesium/mapUtil'
import rightEdit from '@/views/layerManagement/components/rightEdit.vue';
import leftList from '@/views/layerManagement/components/leftList.vue';
import { DrawPolygon } from '@/views/layerManagement/components/utils';
@@ -131,6 +132,8 @@
const loadDataToMap = (dataList) => {
  if (!viewer) return; 
  viewer.entities.removeAll();
    // 存储所有有效坐标，用于后续定位
  const allCoordinates = [];
  dataList.forEach(item => {
    // 解析 geo_data 为经纬度坐标数组（使用已有的 parseGeoDataToPositions 方法）
    const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
@@ -178,7 +181,31 @@
  // 绑定新的点击事件，用于高亮选中的围栏
  // viewInstance.value?.addLeftClickEvent(null, handleFenceClick, 'fenceHighlighting');
};
// 围栏点击处理函数（高亮选中项 + 可联动右侧编辑组件）
const handleFenceClick = (movement) => {
  if (!viewer) return;

  // 拾取点击的实体
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.id?.customType === 'fence_polygon') {
    const selectedEntity = pickedObject.id;
    console.log('选中的围栏数据：', selectedEntity.customInfo);

    // 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);
  }
};
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);