新版电子围栏

src/api/demo/jobarea.ts

@@ -0,0 +1,17 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  AddWorkArea = '/api/Manage/AddWorkArea',
+  UpdateWorkArea = '/api/Manage/UpdateWorkArea',
+  DeleteWorkArea = '/api/Manage/DeleteWorkArea',
+}
+export const AddWorkArea = (params) => defHttp.post({
+  url: Api.AddWorkArea,
+  params,
+});
+export const UpdateWorkArea = (params) => defHttp.post({
+  url: Api.UpdateWorkArea,
+  params,
+});
+export const DeleteWorkArea = (params: string) => defHttp.post({
+  url: `${Api.DeleteWorkArea}?id=${params}`,
+});

src/views/demo/jobarea/index.vue

@@ -9,6 +9,7 @@
           :allWorkspaceDataList="allWorkspaceDataList"
           :nowShowAreaData="nowShowAreaData"
           :projectList="projectList"
+          :geomDate="geomDate"
           @changeLeftMenuShow="changeLeftMenuShow"
           @handlerLocation="handlerLocation"
           @changeAnnotationInfoShow="changeAnnotationInfoShow"
@@ -18,6 +19,11 @@
           @setAllAreaData="setAllAreaData"
           @deleteAnnotation="deleteAnnotation"
           @deleteArea="deleteArea"
+          @drawArea="drawArea"
+          @flyToGraphic="flyToGraphic"
+          @stopDrawArea="stopDrawArea"
+          @updateGraphic="updateGraphic"
+          @backGraphic="backGraphic"
         />
       </div>
       <!-- 地图 -->
@@ -29,13 +35,14 @@
           :allAreaDataList="allAreaDataList"
           :nowShowAreaData="nowShowAreaData"
           :nowShowImageData="nowShowImageData"
+          :geomDate="geomDate"
           @setNowShowAnnotationData="setNowShowAnnotationData"
           @setNowShowAreaData="setNowShowAreaData"
           @setAllAreaData="setAllAreaData"
         />
       </div>
       <!-- 地图作业区域 -->
-      <div class="areaInfoDiv" v-if="areaInfoShow">
+      <!-- <div class="areaInfoDiv" v-if="areaInfoShow">
         <PathAreaInfo
           :allAreaDataList="allAreaDataList"
           :nowShowAreaData="nowShowAreaData"
@@ -44,7 +51,7 @@
           @handlerLocation="handlerLocation"
           @deleteArea="deleteArea"
         />
-      </div>
+      </div> -->
     </div>
   </template>
   <script lang="ts" setup>
@@ -59,6 +66,8 @@
     } from '@/api/demo/mediaLibrary';
     import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
     import { useMessage } from '@/hooks/web/useMessage';
+    import * as mars3d from "mars3d"
+    import * as Cesium from 'mars3d-cesium';
     const { createMessage, createConfirm } = useMessage();
   
     const props = defineProps(['pathRecord']);
@@ -81,6 +90,10 @@
   
     // 地图ref
     const pathMapRef = ref();
+    const geomDate = ref({
+      geom:'',
+      properties: '',
+    })
   
     // 左侧目录是否显示----------------------------------------------------
     const pathLeftMenuRef = ref();
@@ -175,16 +188,15 @@
     async function getWorkAreaList(showThis = true) {
       allAreaDataList.value = await GetWorkAreaList();
       if (allAreaDataList.value.length > 0) {
-        allAreaDataList.value.forEach((area, index) => {
-          let geomjson = WktToGeojson(area.geom);
-          area = {
-            ...area,
-            properties: JSON.parse(area.properties),
-            geomtype: getGeomType(area),
+        allAreaDataList.value = allAreaDataList.value.map(item => {
+          let geomjson = WktToGeojson(item.geom);
+          return {
+            ...item,
+            // properties: JSON.parse(item.properties),
+            geomtype: getGeomType(item),
             coordinates: geomjson.coordinates,
-          };
-          allAreaDataList.value[index] = area;
-        });
+          }
+        })
       }
       if (showThis) {
         setTimeout(() => {
@@ -247,6 +259,21 @@
     if (geom.indexOf('POINT') > -1 && radiusFlag) {
       return 'Circle';
     }
+  }
+  const drawArea = (shape, areaType) => {
+    pathMapRef.value.drawArea(shape, areaType)
+  }
+  const stopDrawArea = () => {
+    pathMapRef.value.stopDrawArea()
+  }
+  const flyToGraphic = (item) => {
+    pathMapRef.value.flyToGraphic(item)
+  }
+  const updateGraphic = (item) => {
+    pathMapRef.value.updateGraphic(item)
+  }
+  const backGraphic = (item) => {
+    pathMapRef.value.backGraphic(item)
   }
     onMounted(() => {
       // 查询地图工作区域
@@ -263,12 +290,13 @@
   
       .leftMenuDiv {
         position:absolute;
-        top:20px;
-        left:20px;
+        top:39px;
+        left:48px;
         z-index:1;
         display:flex;
         gap:15px;
-        width: 423px;
+        width: 365px;
+        height: 800px;
       }
   
       .mapDiv {