无人机管理后台前端（已迁走）
blame | history | patch | commit | commitdiff | ignore whitespace
张含笑
2025-11-07 259610b6b427708ee957b86d32530fb5e6cae6b1 
 src/views/layerManagement/index.vue


@@ -53,18 +53,16 @@


import { flyVisual } from '@/utils/cesium/mapUtil';


import rightEdit from '@/views/layerManagement/components/rightEdit.vue';


import leftList from '@/views/layerManagement/components/leftList.vue';


import nationalSpatialPlanning from '@/views/layerManagement/components/nationalSpatialPlanning.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';




import { provide } from 'vue';


import { useStore } from 'vuex';


const store = useStore();


const userInfo = computed(() => store.getters.userInfo);


const areaCode = userInfo.value?.detail?.areaCode || '';


// console.log('用户信息',areaCode);


// 红色警告交叉面提示窗


const isShowWaringTip = ref(false);


const activeName = ref('电子围栏');


@@ -139,37 +137,26 @@


    layerParams.value.folderOption = formattedFolderOption;


  });


};


// 编辑围栏区域


// const handleEdit = val => {


// console.log('编辑数据',val.geo_data);




//   viewer.entities.removeAll();


//   layerParams.value.editDetailData = val;


//   drawPolygonExample.editThePatch(true);


//   drawPolygonExample.drawTheArea(true);


//   const positions = parseGeoDataToPositions(val.geo_data, val.altitude);


//   if (positions.length < 3) return; // 少于3个点无法构成多边形


//   drawPolygonExample.initPolygon(viewer, positions, true);


// };


// 编辑围栏区域


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 解析坐标


  //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;


};


// 新增开启绘制


@@ -197,21 +184,44 @@


const loadDataToMap = dataList => {


  if (!viewer) return;


  viewer.entities.removeAll();


  // 存储所有有效坐标，用于后续定位


  // 存储所有有效坐标


  tbJwdList = [];


  dataList.forEach(item => {


    let positions = parseGeoDataToPositions(item.geo_data, item.altitude);


    // positions.push(positions[0]);


    if (positions.length < 3) {


      console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);


      return;


    }


   


    tbJwdList.push(...positions);


    //  转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式


    let degreesArray = [];


    positions.forEach(pos => {


      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',


@@ -220,9 +230,9 @@


        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, // 贴地显示


      },


@@ -230,31 +240,27 @@


      polyline: {


        positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),


        width: 2,


        material: Cesium.Color.YELLOW,


        material:borderColor,


        clampToGround: true,


      },


      zIndex: 99, // 层级，确保在其他图层上方显示


      zIndex: 99, 


    });


  });


  focusOnAllFeatures();


  viewInstance.value?.addLeftClickEvent(null, handleFenceClick);


};


//计算所有图斑的包围球并定位


const focusOnAllFeatures = () => {


  if (tbJwdList.length === 0 || !viewer) return;




  // 转换所有经纬度坐标为Cartesian3


  const allPositions = tbJwdList.flatMap(pos =>


    Cesium.Cartesian3.fromDegrees(pos.lng, pos.lat, pos.height || 0)


  );


  if (allPositions.length === 0) return;


  const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);


  viewer.camera.flyToBoundingSphere(boundingSphere, {


    duration: 0, // 飞行时间（秒）


    offset: new Cesium.HeadingPitchRange(


      Cesium.Math.toRadians(0), // 方向角


      Cesium.Math.toRadians(-90) // 俯仰角


    ),


  const positionsData = tbJwdList.map(pos => [


    pos.lng,


    pos.lat,


    pos.height || 0 


  ]);


  flyVisual({


    positionsData,


    viewer,


    multiple: 13, // 缩放倍数


    pitch: -90 


  });


};


// 区域点击显示详细信息


@@ -290,9 +296,6 @@


let publicCesiumInstance = null;


let viewer = null;


const viewInstance = shallowRef(null);


const homeViewer = shallowRef(null);




// 初始化绘制工具实例


const drawPolygonExample = new DrawPolygon();


// 地图初始化


const initMap = () => {


@@ -303,10 +306,8 @@


    layerMode: 4,


    contour: false,


  });




  viewer = publicCesiumInstance.getViewer();


  viewInstance.value = publicCesiumInstance;




  const nanChangPosition = Cesium.Cartesian3.fromDegrees(


    115.892151, // 经度


    28.676493, // 纬度


@@ -347,22 +348,17 @@


  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];


    //  转换为 turf 支持的 GeoJSON 格式（Polygon 类型需外层嵌套数组）


    const turfPolygon = turf.polygon([closedPolygon]);


    //  计算面积（turf.area() 返回平方米，保留2位小数）


    const area = _.round(turf.area(turfPolygon), 2);


    //  赋值给 layerParams，


    layerParams.value.fenceArea = area;


  } else {


    // 坐标点不足3个时，清空面积


    layerParams.value.fenceArea = 0;


  }


};


@@ -402,15 +398,12 @@


  initMap();


  cesiumContextMenu();


  getdataFolderApi();


  // 监听单个实体删除事件


  EventBus.on('deleteMapEntityById', deleteMapEntityById);


  // 监听文件夹下所有实体删除事件


  EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);


});


onBeforeUnmount(() => {


  destroyMap();


  cesiumContextMenu(false);


  // 移除事件监听


  EventBus.off('deleteMapEntityById', deleteMapEntityById);


  EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);


});


@@ -427,7 +420,6 @@


// 删除文件夹下所有地图实体


const deleteMapEntitiesByFolderId = folderId => {


  if (!viewer) return;


  // 假设围栏数据中包含 folder_id 字段，根据文件夹ID过滤


  const entitiesToDelete = viewer.entities.values.filter(entity => {


    return entity.customInfo?.folder_id === folderId;


  });


@@ -483,5 +475,6 @@


    -ms-user-select: none;


    user-select: none;


  }




}


</style>