From c711e82c4b1685a4b00884d7aab70d9d3b0265ff Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 30 Oct 2025 11:10:31 +0800
Subject: [PATCH] feat:地图渲染添加点
---
src/api/layer/index.js | 4 +-
src/views/layerManagement/components/rightEdit.vue | 19 ++++-----
src/views/layerManagement/components/utils.js | 17 +++-----
src/views/layerManagement/components/leftList.vue | 8 +++-
src/views/layerManagement/index.vue | 33 ++++++++--------
5 files changed, 40 insertions(+), 41 deletions(-)
diff --git a/src/api/layer/index.js b/src/api/layer/index.js
index 8b810cc..7713e21 100644
--- a/src/api/layer/index.js
+++ b/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',
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index d33b40e..a325a6e 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/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 = () => {
diff --git a/src/views/layerManagement/components/rightEdit.vue b/src/views/layerManagement/components/rightEdit.vue
index 1e19c06..9b40748 100644
--- a/src/views/layerManagement/components/rightEdit.vue
+++ b/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);
})
diff --git a/src/views/layerManagement/components/utils.js b/src/views/layerManagement/components/utils.js
index ede07e4..cdf7c42 100644
--- a/src/views/layerManagement/components/utils.js
+++ b/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 => {
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 6a4d83e..6a2f096 100644
--- a/src/views/layerManagement/index.vue
+++ b/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;
--
Gitblit v1.9.3