Merge branch 'refs/heads/feature/v9.0/9.0.1' into test

张含笑

2025-12-09 5808f76456ca0d40de5074f132b73a5a488e3e13

 src/views/layerManagement/index.vue

@@ -8,14 +8,18 @@
        </el-tabs>
      </div>
      <!-- 地图 -->
      <div class="mapContainer">
        <!-- <div class="tool-tip warning" v-show="isShowWaringTip">
      <div class="mapContainer" v-loading="isPageLoading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      element-loading-text="加载中...">
      <div class="tool-tip warning" v-show="isShowWaringTip">
          <span class="icon">
            <el-icon><WarningFilled /></el-icon>
          </span>
          <span>测区不支持交叉面，无法生成航线</span>
        </div> -->
        <div class="tool-tip" v-if="layerParams.addNest">点击地图生成测绘区域</div>
          <span>{{ showWarnToolTipText }}</span>
        </div>
         <div class="tool-tip" v-if="!isShowWaringTip && layerParams.addNest">
          {{ showToolTipText }}
        </div>
        <div id="layMap" class="ztzf-cesium"></div>
        <leftList
          v-if="
@@ -29,14 +33,17 @@
          @update:editFolder="handleFolder"
          :activeName="activeName"
          @newFencesMethods="newFencesMethods"
          :reset-check="resetCheck"
        ></leftList>
        <rightEdit
          v-if="layerParams.addNest || layerParams.editNest"
          @callParentMethod="parentMethod"
          @update:loading="handleLoadingChange"
        ></rightEdit>
        <folderFile
          @refreshMethod="refreshMethod"
          :activeName="activeName"
           @callParentMethod="parentMethod"
          v-if="layerParams.addFolder || layerParams.editFolder"
        ></folderFile>
      </div>
@@ -60,31 +67,42 @@

import { provide } from 'vue';
import { useStore } from 'vuex';
const isProd = import.meta.env.VITE_APP_ENV === 'production'
const store = useStore();
const userInfo = computed(() => store.getters.userInfo);
const areaCode = userInfo.value?.detail?.areaCode || '';
const showToolTipText = ref('点击地图生成测绘区域')
const showWarnToolTipText = ref('测区不支持交叉面')
// 红色警告交叉面提示窗
const isShowWaringTip = ref(false);
const activeName = ref('电子围栏');
const activeName = ref('自定义识别区');
const activeType = ref('0');
let tbJwdList = [];
const selectDataList = ref([]);
// 当前面位置信息
let curPolygonPosition = [];
const tabData = ref([
  {
    name: '电子围栏',
    type: '0',
  },
  {
    name: '自定义禁飞区',
    type: '1',
  },
  {
    name: '国土空间规划',
    type: '2',
  },
]);
const tabData = computed(() => {
  const allTabs = [
    {
      name: '自定义识别区',
      type: '0',
    },
    {
      name: '自定义禁飞区',
      type: '1',
    },
    {
      name: '国土空间规划',
      type: '2',
    },
  ];

  // 如果是生产环境，只返回自定义识别区
  if (isProd) {
    return allTabs.filter(tab => tab.type === '0');
  }
  return allTabs;
});
const layerParams = ref({
  addNest: false,
  editNest: false,
@@ -103,25 +121,31 @@
  editFolderData: null,
  editingIsProhibited: false, //禁止编辑
  isDetailShow: false,
  isSingleLocating:false , //是否是单个定位
  currentLocationFolderId:null,
  crossSurface:false,//是否交叉面
});

const resetCheck = ref(false);
const handleClick = tab => {
  const clickedTab = tabData.value.find(item => item.type === tab.paneName);
  activeType.value = clickedTab.type;
  activeName.value = clickedTab.name;
  getdataFolderApi();
  parentMethod();
  handleCoverDataUpdate([])
  layerParams.value.addNest = false
    layerParams.value.editNest = false
     layerParams.value.addFolder = false
    layerParams.value.editFolder = false
    resetCheck.value = !resetCheck.value;

};
const refreshMethod = () => {
  getdataFolderApi();
};
const getdataFolderApi = () => {
  let id;
  if (activeName.value === '电子围栏') {
  if (activeName.value === '自定义识别区') {
    id = 1;
  } else if (activeName.value === '自定义禁飞区') {
    id = 2;
@@ -143,7 +167,7 @@
  viewer.entities.removeAll();
  layerParams.value.editDetailData = val;
  drawPolygonExample.editThePatch(true);
  drawPolygonExample.drawTheArea(true); 
  drawPolygonExample.drawTheArea(true);
  let geoDataArr = JSON.parse(val.geo_data);
  if (geoDataArr.length > 0) {
    geoDataArr.pop();
@@ -157,6 +181,12 @@
// 编辑文件夹
const handleFolder = val => {
parentMethod()
  selectDataList.value = val.children;
  if (selectDataList.value?.length > 0) {
    loadDataToMap(selectDataList.value);
  } else {
    viewer.entities.removeAll();
  }
  layerParams.value.editFolderData = val;
};
// 新增开启绘制
@@ -174,10 +204,8 @@
};
// 点击显示区域
const handleCoverDataUpdate = data => {
console.log('data',data);

  selectDataList.value = data;
  if (selectDataList.value.length > 0) {
  if (selectDataList.value?.length > 0) {
    loadDataToMap(selectDataList.value);
  } else {
    viewer.entities.removeAll();
@@ -186,7 +214,7 @@
const loadDataToMap = dataList => {
  if (!viewer) return;
  viewer.entities.removeAll();
  // 存储所有有效坐标，用于后续定位
  // 存储所有有效坐标
  tbJwdList = [];
  dataList.forEach(item => {
    let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
@@ -194,12 +222,37 @@
      console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
      return;
    }

    tbJwdList.push(...positions);
    let degreesArray = [];
    positions.forEach(pos => {
      degreesArray.push(pos.lng, pos.lat, pos.height);
    });
    viewer.entities.add({
     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',
      customInfo: item,
@@ -207,9 +260,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, // 贴地显示
      },
@@ -217,49 +270,88 @@
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
        width: 2,
        material: Cesium.Color.YELLOW,
        material:borderColor,
        clampToGround: true,
      },
      zIndex: 99, // 层级，确保在其他图层上方显示
      zIndex: 99,
    });
  });
  focusOnAllFeatures();
 if (!layerParams.value.isSingleLocating) {
    focusOnAllFeatures();
  }
  viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
};
const focusOnAllFeatures = () => {
  if (tbJwdList.length === 0 || !viewer) return;

  // 判断是否有指定定位的文件夹
  if (layerParams.value.currentLocationFolderId) {
    // 筛选当前文件夹下的所有子节点坐标
    const targetFolderPositions = selectDataList.value
      .filter(item => item.folder_id === layerParams.value.currentLocationFolderId)
      .flatMap(item => {
        const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
        return positions.length >= 3 ? positions : [];
      });

    if (targetFolderPositions.length > 0) {
      const positionsData = targetFolderPositions.map(pos => [
        pos.lng,
        pos.lat,
        pos.height || 0
      ]);
      flyVisual({
        positionsData,
        viewer,
        multiple: activeName.value === '国土空间规划' ? 13 : 10,
        pitch: -90
      });
      return; // 仅聚焦当前文件夹，结束方法
    }
  }

  // 无指定文件夹时，聚焦所有选中数据
  const positionsData = tbJwdList.map(pos => [
    pos.lng,
    pos.lat,
    pos.height || 0 
    pos.height || 0
  ]);
  flyVisual({
    positionsData,
    viewer,
    multiple: 13, // 缩放倍数
    pitch: -90 
    multiple: activeName.value === '国土空间规划' ? 13 : 4,
    pitch: -90
  });
};
// 区域点击显示详细信息
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;
    const selectedData = selectedEntity.customInfo;
    //   viewer.entities.values.forEach(entity => {

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; // 标记为编辑模式
      // 根据围栏类型设置fenceType
      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;
@@ -269,6 +361,8 @@
      layerParams.value.editingIsProhibited = true;
    }
  }
}

};
let publicCesiumInstance = null;
let viewer = null;
@@ -280,11 +374,12 @@
    dom: 'layMap',
    flatMode: false,
    terrain: true,
    layerMode: 4,
    contour: false,
    layerMode: 4, //轮廓线
    dockOptions:{showDock:true}//机巢
  });
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewInstance.value?.flyToContour();
  const nanChangPosition = Cesium.Cartesian3.fromDegrees(
    115.892151, // 经度
    28.676493, // 纬度
@@ -304,7 +399,6 @@
};
// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {
  isShowWaringTip.value = false;
  if (positions) {
    curPolygonPosition = positions.map(item => {
      let cartographic = Cesium.Cartographic.fromCartesian(item);
@@ -319,6 +413,15 @@
    });
  }
  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
  if(polygon.length ===0){
    isShowWaringTip.value = false
  }
  if(polygon.length > 0 && !isShowWaringTip.value){
    showToolTipText.value = '测绘区域已绘制完成'
  } else {
    showToolTipText.value = '点击地图生成测绘区域'
  }

 if(polygon.length > 0){
      polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat])
 }
@@ -334,13 +437,21 @@
    const closedPolygon = isClosed ? polygon : [...polygon, firstPoint];
    const turfPolygon = turf.polygon([closedPolygon]);
    const area = _.round(turf.area(turfPolygon), 2);
    layerParams.value.fenceArea = area;
    if (area / 1000000 < 50) {
      layerParams.value.fenceArea = area;
    } else {
      layerParams.value.fenceArea = area;
      isShowWaringTip.value = true
      showWarnToolTipText.value = '自定义禁飞区不能超过50平方公里'
    }
  } else {
    layerParams.value.fenceArea = 0;
  }
};
drawPolygonExample.subscribe('getShowWaringTip', data => {
  isShowWaringTip.value = data;
  showWarnToolTipText.value = '测区不支持交叉面'
  layerParams.value.crossSurface = data
});
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
@@ -370,20 +481,47 @@
    cesium.removeEventListener('contextmenu', preventDefault);
  }
};
// 添加loading
const isPageLoading = ref(false);
const handleLoadingChange = (status) => {
  isPageLoading.value = status;
};
provide('layerParams', layerParams);
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;

  // level 2 节点走全量聚焦，level 3 节点走单个聚焦
  if (nodeData.level === 2) {
    focusOnAllFeatures();
  } else {
    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);
});
@@ -400,7 +538,6 @@
// 删除文件夹下所有地图实体
const deleteMapEntitiesByFolderId = folderId => {
  if (!viewer) return;
  // 假设围栏数据中包含 folder_id 字段，根据文件夹ID过滤
  const entitiesToDelete = viewer.entities.values.filter(entity => {
    return entity.customInfo?.folder_id === folderId;
  });
@@ -409,6 +546,7 @@
  });
  // 更新选中数据列表
  selectDataList.value = selectDataList.value.filter(item => item.folder_id !== folderId);
  getdataFolderApi()
};
</script>

@@ -421,11 +559,11 @@
  position: relative;
  width: 100%;
  height: 80vh;
  .warning {
    .warning {
    position: absolute;
    top: 234px;
    color: #fff;
    background: rgba(140, 0, 0, 0.4);
    background: rgba(140, 0, 0, 0.4) !important;

    .icon {
      display: flex;
@@ -436,6 +574,8 @@
  #layMap {
    width: 100%;
    height: 100%;
     border-radius: 8px 8px 8px 8px;
     overflow: hidden;
  }
  .tool-tip {
    display: flex;
@@ -456,5 +596,6 @@
    -ms-user-select: none;
    user-select: none;
  }

}
</style>