feat:地图渲染添加点

张含笑

2025-10-30 c711e82c4b1685a4b00884d7aab70d9d3b0265ff

feat:地图渲染添加点

 src/api/layer/index.js

@@ -20,13 +20,13 @@
// 删除
export const deleteFenceApi = (id) => {
    return request({
      url: `/drone-device-core/layer/api/v1/data?id=${id}`,
      url: `/drone-device-core/layer/api/v1/data/${id}`,
      method: 'delete',
    });
  };

// 新增
export const attachDownload = (data) => {
export const addFenceApi = (data) => {
    return request({
        url: `/drone-device-core/layer/api/v1/data`,
        method: 'post',

 src/views/layerManagement/components/leftList.vue

@@ -54,7 +54,7 @@
</template>

<script setup>
import { treeDataApi } from '@/api/layer/index';
import { treeDataApi ,deleteFenceApi} from '@/api/layer/index';
import { inject, onMounted } from 'vue';
const emit = defineEmits(['update:coverData', 'update:deitData','newFencesMethods']);
const coverData = ref();
@@ -152,7 +152,11 @@

// 删除按钮事件
const handleDelete = node => {
  console.log('删除操作，节点：', node.data);
let id = node.data.id
  deleteFenceApi(id).then(res=>{
    console.log('删除成功',res);
  })
    gettreeDataApi();
};
// 新增围栏
const addFence = () => {

 src/views/layerManagement/components/rightEdit.vue

@@ -58,7 +58,7 @@
</template>

<script setup>
import { deitFenceApi } from '@/api/layer/index';
import { deitFenceApi,addFenceApi } from '@/api/layer/index';
const emit = defineEmits([ 'callParentMethod']);
const layerParams = inject('layerParams');
const options = [
@@ -100,7 +100,7 @@
detailData.value = layerParams.value.editDetailData
 totalArea.value = layerParams.value.total_area
 totalCount.value = layerParams.value.total_count
console.log('2222222',layerParams.value.decideWhetherToAddOrEdit);


const clearAllData = () => {
  detailData.value = {}
@@ -122,16 +122,15 @@
};
const submitHandle = () => {
    const params={
    folder_id:detailData.value.folder_id,
    id:detailData.value.id,
    name:detailData.value.name,
    description:detailData.value.description,
    is_enabled: detailData.value.is_enabled,
    area:detailData.value.area,
    altitude:detailData.value.altitude,
    folder_id:1,  
    name:'测试',
    description:'333366663',
    is_enabled: true,
    area:1200,
    altitude:120,
    geo_data: layerParams.value.polygonPosition,
    }
deitFenceApi(params).then(res=>{
addFenceApi(params).then(res=>{
  console.log('保存',res);
  
})

 src/views/layerManagement/components/utils.js

@@ -101,9 +101,7 @@
    }
    // 绘制
    drawTheArea(data){
        this.whetherToDraw = data
        console.log('this',this.whetherToDraw);
		
        this.whetherToDraw = data		
    }
    // 删除测区
    deleteTheArea(data) {
@@ -113,7 +111,7 @@
    // 开始绘制
    startDrawing() {
        if (!this.whetherToDraw) {
            console.log('当前不允许绘制，whetherToDraw 为 false');
            console.log('当前不允许绘制');
            return;
          }
         
@@ -241,8 +239,7 @@

        const pickedEntity = this.viewer.scene.pick(movement.position)?.id
        const isPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.POINT
console.log('pickedEntity',pickedEntity);
console.log('isPoint',isPoint);

        if (pickedEntity && isPoint) {
            this.isDragging = true
            this.draggedEntity = pickedEntity
@@ -293,9 +290,7 @@
        // 编辑模式下，拖拽点实时更新
        if (this.editingMode && this.draggedEntity?.customData) {
            this.draggedEntity.position = cartesian
            this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
            console.log('拖拽');
			
            this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian			
        }

        // 绘制模式下，实时更新最后一个点
@@ -330,7 +325,7 @@
        const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
        const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
        if (this.drawingMode && !this.whetherToDraw) {
            console.log('当前不允许绘制，无法添加点或闭合多边形');
            console.log('当前不允许绘制');
            return; // 阻断后续绘制逻辑
          }
        // 如果不是绘制模式
@@ -570,7 +565,7 @@
          } else {
            // 新增：不允许绘制时，确保绘制模式为 false，避免误触发
            this.drawingMode = false;
            console.log('当前不允许绘制，初始化事件处理器但不启动绘制');
            console.log('当前不允许绘制');
          }
        
        let newPosition = positions.map(item => {

 src/views/layerManagement/index.vue

@@ -74,7 +74,7 @@
provide('layerParams', layerParams);
const handleClick = tab => {
  const clickedTab = tabData.value.find(item => item.type === tab.paneName);
  console.log(clickedTab, '5555')

  activeType.value = clickedTab.type;
  activeName.value = clickedTab.name;
};
@@ -86,7 +86,7 @@
viewer.entities.removeAll();
  layerParams.value.editDetailData = val;
  drawPolygonExample.editThePatch(true);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude); 
  if (positions.length < 3) return; // 少于3个点无法构成多边形
   drawPolygonExample.drawTheArea(true)
  drawPolygonExample.initPolygon(viewer, positions, true);
@@ -107,7 +107,6 @@
// 点击显示区域
const handleCoverDataUpdate = data => {
  selectDataList.value = data;

  if (selectDataList.value.length > 0) {
    loadDataToMap(selectDataList.value);
  } else {
@@ -120,12 +119,12 @@
  // 存储所有有效坐标，用于后续定位
  tbJwdList = [];
  dataList.forEach(item => {
    const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    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 = [];
@@ -232,9 +231,10 @@

// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {

  if (positions) {
    curPolygonPosition = positions.map(item => {
      let cartographic = Cesium.Cartographic.fromCartesian(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); //高度
@@ -245,21 +245,22 @@
      };
    });
  }

  
  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
  polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat]);
  // console.log('绘制的多边形顶点坐标（Cartesian3）：', polygon);
layerParams.value.polygonPosition = polygon
  console.log('polygon', layerParams.value.polygonPosition);
};
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
  throttleLoadPlanarRoute(data);
});
  let polygonString = JSON.stringify(polygon);
  // polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat]);
  layerParams.value.polygonPosition = polygonString
  
  };
  const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
  drawPolygonExample.subscribe('getPolygonPositions', data => {
    throttleLoadPlanarRoute(data);
  });

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

  if (viewer) {
    viewer.destroy();
    viewer = null;