feat：更新初始化地形

chenyao

2025-11-17 233e4fc4f35bd00a36ee34a7fbf5e47b41db26db

 src/views/layerManagement/index.vue

@@ -9,28 +9,65 @@
      </div>
      <!-- 地图 -->
      <div class="mapContainer">
        <div class="tool-tip" v-if="layerParams.addNest">点击地图生成测绘区域</div>
        <div id="layMap" class="ztzf-cesium"></div>
        <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList>
        <rightEdit></rightEdit>
        <leftList
          v-if="
            !layerParams.addNest &&
            !layerParams.editNest &&
            !layerParams.addFolder &&
            !layerParams.editFolder
          "
          @update:coverData="handleCoverDataUpdate"
          @update:deitData="handleEdit"
          @update:editFolder="handleFolder"
          :activeName="activeName"
          @newFencesMethods="newFencesMethods"
        ></leftList>
        <rightEdit
          v-if="layerParams.addNest || layerParams.editNest"
          @callParentMethod="parentMethod"
        ></rightEdit>
        <folderFile
          @refreshMethod="refreshMethod"
          :activeName="activeName"
          v-if="layerParams.addFolder || layerParams.editFolder"
        ></folderFile>
      </div>
    </div>
  </basic-container>
</template>

<script setup>
import { flyVisual } from '@/utils/cesium/mapUtil'
import EventBus from '@/utils/eventBus';
import * as turf from '@turf/turf';
import { dataFolderApi } from '@/api/layer/index';
import folderFile from '@/views/layerManagement/components/folderFile.vue';
import { parseGeoDataToPositions } from '@/utils/geoParseUtil';
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';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';
const activeName = ref('电子围栏');

import { provide } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const userInfo = computed(() => store.getters.userInfo);
const areaCode = userInfo.value?.detail?.areaCode || '';
// 红色警告交叉面提示窗
const isShowWaringTip = ref(false);
const activeName = ref('自定义识别区');
const activeType = ref('0');
let tbJwdList = [];
const selectDataList = ref([]);
// 当前面位置信息
let curPolygonPosition = [];
const tabData = ref([
  {
    name: '电子围栏',
    name: '自定义识别区',
    type: '0',
  },
  {
@@ -42,218 +79,315 @@
    type: '2',
  },
]);
const layerParams = ref({
  addNest: false,
  editNest: false,
  editDetailData: null,
  total_count: 0,
  total_area: 0,
  polygonPosition: null,
  decideWhetherToAddOrEdit: null, //新增or编辑围栏
  addAnEditingFolder: null, //新增or编辑文件夹
  addFolder: false,
  editFolder: false,
  folderOption: [], //文件夹选项
  fenceType: 1,
  fenceArea: 0, //围栏面积
  fileType: 1, //文件夹类型
  editFolderData: null,
  editingIsProhibited: false, //禁止编辑
  isDetailShow: false,
  isSingleLocating:false
});

const handleClick = tab => {
  const clickedTab = tabData.value.find(item => item.type === tab.paneName);
  activeType.value = clickedTab.type;
  activeName.value = clickedTab.name;
  getdataFolderApi();
  parentMethod();
  layerParams.value.addNest = false
    layerParams.value.editNest = false
     layerParams.value.addFolder = false
    layerParams.value.editFolder = false
};
// 解析 geo_data 并转换为 DrawPolygon 所需的坐标格式
const parseGeoDataToPositions = (geoDataStr, altitude) => {
  try {
    // 解析 JSON 字符串为 GeoJSON 对象
    const geoData = JSON.parse(geoDataStr);
    // 仅处理 Polygon 类型的地理数据
    if (geoData.type !== 'Polygon') return [];

    // 提取 coordinates（取第一个面，忽略孔洞），并补充高度
    const coordinates = geoData.coordinates[0];
    return coordinates.map(([lng, lat]) => ({
      lng: Number(lng),
      lat: Number(lat),
      height: Number(altitude) || 0, // 高度默认取数据中的 altitude，无则为 0
const refreshMethod = () => {
  getdataFolderApi();
};
const getdataFolderApi = () => {
  let id;
  if (activeName.value === '自定义识别区') {
    id = 1;
  } else if (activeName.value === '自定义禁飞区') {
    id = 2;
  } else {
    id = 3;
  }
  dataFolderApi(id).then(res => {
    const originalFolderList = res.data.data || [];
    const formattedFolderOption = originalFolderList.map(folder => ({
      label: folder.name,
      value: folder.id.toString(),
    }));
  } catch (error) {
    console.error('解析 geo_data 失败：', error);
    return [];
  }
    layerParams.value.folderOption = formattedFolderOption;
  });
};

const selectDataList = ref([]);
// 提取图斑坐标
function polygonWktToTargetArray(wktPolygon, defaultHeight = 140.6) {
  try {
    if (!/^POLYGON\(\([\d\s,.]+\)\)$/.test(wktPolygon)) {
      throw new Error('输入不是有效的 WKT POLYGON 格式');
    }

    const coordStr = wktPolygon
      .replace(/^POLYGON\(\(/, '')
      .replace(/\)\)$/, '')
      .trim();

    const coordPairs = coordStr.split(/,\s*/).filter(pair => pair.trim() !== '');

    const result = coordPairs.map(pair => {
      const [lng, lat] = pair
        .split(/\s+/)
        .map(Number)
        .filter(num => !isNaN(num));

      if (
        lng === undefined ||
        lat === undefined ||
        lng < -180 ||
        lng > 180 ||
        lat < -90 ||
        lat > 90
      ) {
        throw new Error(`无效的经纬度对：${pair}`);
      }

      return {
        lng: lng,
        lat: lat,
        longitude: lng, // 与 lng 一致
        latitude: lat, // 与 lat 一致
      };
    });

    const uniqueResult = Array.from(
      new Map(result.map(item => [`${item.lng}-${item.lat}`, item])).values()
    );

    return uniqueResult;
  } catch (error) {
    return []; // 异常时返回空数组
// 编辑围栏区域
const handleEdit = val => {
  viewer.entities.removeAll();
  layerParams.value.editDetailData = val;
  drawPolygonExample.editThePatch(true);
  drawPolygonExample.drawTheArea(true); 
  let geoDataArr = JSON.parse(val.geo_data);
  if (geoDataArr.length > 0) {
    geoDataArr.pop();
  }
}

  const processedGeoData = JSON.stringify(geoDataArr);
  //geo_data 解析坐标
  const positions = parseGeoDataToPositions(processedGeoData, val.altitude);
  if (positions.length < 3) return; // 少于3个点无法构成多边形
  drawPolygonExample.initPolygon(viewer, positions, true);
};
// 编辑文件夹
const handleFolder = val => {
parentMethod()
  layerParams.value.editFolderData = val;
};
// 新增开启绘制
const newFencesMethods = () => {
  viewer.entities.removeAll();
  drawPolygonExample.initHandler(viewer);
  drawPolygonExample.drawTheArea(true);
  drawPolygonExample.startDrawing();
};
// 清除地图数据
const parentMethod = () => {
  drawPolygonExample.delPolygon();
  drawPolygonExample.drawTheArea(false);
  viewer.entities.removeAll();
};
// 点击显示区域
const handleCoverDataUpdate = data => {
  selectDataList.value = data;
console.log('获取的',selectDataList.value);

  if (selectDataList.value.length > 0) {
  
    loadDataToMap(selectDataList.value);
  } else {
    drawPolygonExample.removeEntities();
    viewer.entities.removeAll();
  }
};
const loadDataToMap = (dataList) => {
  if (!viewer) return; 
const loadDataToMap = dataList => {
  if (!viewer) return;
  viewer.entities.removeAll();
    // 存储所有有效坐标，用于后续定位
  const allCoordinates = [];
  // 存储所有有效坐标
  tbJwdList = [];
  dataList.forEach(item => {
    // 解析 geo_data 为经纬度坐标数组（使用已有的 parseGeoDataToPositions 方法）
    const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    if (positions.length < 3) {
      console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
      return;
    }
console.log('positions',positions);

    //  转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式
   
    tbJwdList.push(...positions);
    let degreesArray = [];
    positions.forEach(pos => {
      degreesArray.push(pos.lng, pos.lat, pos.height);   
      
    });   
      degreesArray.push(pos.lng, pos.lat, pos.height);
    });
     const colorMap = {
    1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色）
    2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色）
    3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色）
    // 边框色：去掉透明度，保持纯色
    border1: Cesium.Color.fromCssColorString('#00ff06'),
    border2: Cesium.Color.fromCssColorString('#ff0000'),
    border3: Cesium.Color.fromCssColorString('#00ffea'),
  };
   const fillColor = item.category_id === 1 
      ? colorMap[1] 
      : item.category_id === 2 
        ? colorMap[2] 
        : item.category_id === 3 
          ? colorMap[3] 
          : Cesium.Color.YELLOW.withAlpha(0.5);
    
    const borderColor = item.category_id === 1 
      ? colorMap.border1 
      : item.category_id === 2 
        ? colorMap.border2 
        : item.category_id === 3 
          ? colorMap.border3 
          : Cesium.Color.YELLOW;
    viewer.entities.add({
      id: `polygon_${item.id}`, 
      customType: 'fence_polygon', 
      id: `polygon_${item.id}`,
      customType: 'fence_polygon',
      customInfo: item,
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
        ),
        material: Cesium.Color.YELLOW.withAlpha(0.5), // 填充色
        material:fillColor, // 填充色
        outline: true, // 显示边框
        outlineColor: Cesium.Color.YELLOW, // 边框色
        outlineColor: borderColor, // 边框色
        outlineWidth: 2, // 边框宽度
        clampToGround: true, // 贴地显示
       
      },
    

      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
        width: 2,
        material: Cesium.Color.YELLOW,
        material:borderColor,
        clampToGround: true,
      },
      zIndex: 99, // 层级，确保在其他图层上方显示
      zIndex: 99, 
    });
  });

  //  添加点击事件（参考 entitiesAddSpot 的 spotHighlighting 逻辑）
  // 移除已有点击事件，避免重复绑定
  // viewInstance.value?.removeLeftClickEvent('fenceHighlighting');
  // 绑定新的点击事件，用于高亮选中的围栏
  // 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);
  
 if (!layerParams.value.isSingleLocating) {
    focusOnAllFeatures(); 
  }
  viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
};
const focusOnAllFeatures = () => {
  if (tbJwdList.length === 0 || !viewer) return;
  const positionsData = tbJwdList.map(pos => [
    pos.lng,
    pos.lat,
    pos.height || 0 
  ]);
  flyVisual({
    positionsData,
    viewer,
      multiple:activeName.value == '国土空间规划' ? 13 :4, // 缩放倍数
    pitch: -90 
  });
};
// 区域点击显示详细信息
const handleFenceClick = movement => {
  if (!viewer) return;
  layerParams.value.editDetailData = null;
  
if(activeName.value !== '国土空间规划') {
    const pickedObjects = viewer.scene.drillPick(movement.position, 10); 
  // 遍历所有被点击的实体，找到围栏类型（customType: 'fence_polygon'）
  let selectedEntity = null;
  for (let i = 0; i < pickedObjects.length; i++) {
    const pick = pickedObjects[i];
    if (Cesium.defined(pick.id) && pick.id?.customType === 'fence_polygon') {
      selectedEntity = pick.id;
      break; 
    }
  }
    // 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);
    // }
    // });
  if (selectedEntity) {
    const selectedData = selectedEntity.customInfo;
    if (activeName.value !== '国土空间规划') {
      layerParams.value.editNest = true;
      layerParams.value.decideWhetherToAddOrEdit = 2;
      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;
    }
  }
}else {

  
}

};
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);

// 初始化绘制工具实例
const drawPolygonExample = new DrawPolygon();

// 地图初始化
const initMap = () => {
  publicCesiumInstance = new PublicCesium({
    dom: 'layMap',
    flatMode: false,
    terrain: true,
    layerMode: 4,
    contour: false,
    layerMode: 4, //轮廓线
    dockOptions:{showDock:true}//机巢
  });

  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  drawPolygonExample.initHandler(viewer);
};
  viewInstance.value?.flyToContour();
  const nanChangPosition = Cesium.Cartesian3.fromDegrees(
    115.892151, // 经度
    28.676493, // 纬度
    15000 // 相机高度
  );

// 处理绘制完成后的多边形坐标（示例）
  // 执行相机飞行
  viewer.camera.flyTo({
    destination: nanChangPosition,
    duration: 0,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });
};
// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {
  if (!positions || positions.length < 3) return;
  // console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
  //坐标转换
  const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
  const latLngPositions = cartographics.map(cartographic => ({
    lng: Cesium.Math.toDegrees(cartographic.longitude),
    lat: Cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height || 0,
  }));
  // console.log('转换后的经纬度坐标：', latLngPositions);
  isShowWaringTip.value = false;
  if (positions) {
    curPolygonPosition = positions.map(item => {
      let cartographic = Cesium.Cartographic.fromCartesian(item);
      let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
      let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
      let height = Cesium.Math.toDegrees(cartographic.height); //高度
      return {
        lng: _.round(lng, 6),
        lat: _.round(lat, 6),
        height: _.round(height, 6),
      };
    });
  }
  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
 if(polygon.length > 0){
      polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat])
 }
  let polygonString = JSON.stringify(polygon);
  layerParams.value.polygonPosition = polygon.length > 0 ? polygonString : null;
  if (polygon.length >= 3) {
    //  确保多边形闭合：最后一个点与第一个点一致
    const firstPoint = polygon[0];
    const lastPoint = polygon[polygon.length - 1];
    const isClosed =
      _.round(firstPoint[0], 6) === _.round(lastPoint[0], 6) &&
      _.round(firstPoint[1], 6) === _.round(lastPoint[1], 6);
    const closedPolygon = isClosed ? polygon : [...polygon, firstPoint];
    const turfPolygon = turf.polygon([closedPolygon]);
    const area = _.round(turf.area(turfPolygon), 2);
    layerParams.value.fenceArea = area;
  } else {
    layerParams.value.fenceArea = 0;
  }
};

drawPolygonExample.subscribe('getShowWaringTip', data => {
  isShowWaringTip.value = data;
});
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
console.log('绘制的数据',data);

  throttleLoadPlanarRoute(data);
});

// 地图销毁
const destroyMap = () => {
  drawPolygonExample.destroy();

  if (viewer) {
    viewer.destroy();
    viewer = null;
@@ -274,15 +408,74 @@
    cesium.removeEventListener('contextmenu', preventDefault);
  }
};
provide('layerParams', layerParams);
// onMounted(() => {
//   initMap();
//   cesiumContextMenu();
//   getdataFolderApi();
//   EventBus.on('deleteMapEntityById', deleteMapEntityById);
//   EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
  
// });
onMounted(() => {
  initMap();
  cesiumContextMenu();
  getdataFolderApi();
  // 监听定位事件
  EventBus.on('focusOnNode', (nodeData) => {
    focusOnNode(nodeData);
  });
  EventBus.on('deleteMapEntityById', deleteMapEntityById);
  EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});

//定位到指定节点
const focusOnNode = (nodeData) => {

  if (!viewer || !nodeData?.geo_data) return;

  // 解析节点坐标
  const positions = parseGeoDataToPositions(nodeData.geo_data, nodeData.altitude);
if (positions.length < 3) {
 
    return;
  }
  flyVisual({
    positionsData: positions.map(pos => [pos.lng, pos.lat, pos.height || 0]),
    viewer,
      multiple:activeName.value == '国土空间规划' ? 13 :7, // 缩放倍数
    pitch: -90
  });

};
onBeforeUnmount(() => {
  destroyMap();
  cesiumContextMenu(false);
  EventBus.off('deleteMapEntityById', deleteMapEntityById);
  EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
});
// 删除单个地图实体
const deleteMapEntityById = entityId => {
  if (!viewer) return;
  const entity = viewer.entities.getById(`polygon_${entityId}`);
  if (entity) {
    viewer.entities.remove(entity);
  }
  // 更新选中数据列表
  selectDataList.value = selectDataList.value.filter(item => item.id !== entityId);
};
// 删除文件夹下所有地图实体
const deleteMapEntitiesByFolderId = folderId => {
  if (!viewer) return;
  const entitiesToDelete = viewer.entities.values.filter(entity => {
    return entity.customInfo?.folder_id === folderId;
  });
  entitiesToDelete.forEach(entity => {
    viewer.entities.remove(entity);
  });
  // 更新选中数据列表
  selectDataList.value = selectDataList.value.filter(item => item.folder_id !== folderId);
};
</script>

<style scoped lang="scss">
@@ -297,6 +490,28 @@
  #layMap {
    width: 100%;
    height: 100%;
     border-radius: 8px 8px 8px 8px;
     overflow: hidden;
  }
  .tool-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 800px;
    height: 64px;
    right: 430px;
    top: 60px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 18px;
    color: #ffffff;

    background: rgba(11, 31, 58, 0.7);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

}
</style>