gx

src/view/sy_map.vue

@@ -154,9 +154,9 @@
           </div>
         </div>
       </div>
-      <div class="btns">
+      <div class="btns" v-if="showEdit">
         <div class="btnopen" @click="openEdit">编辑</div>
-        <div class="btnsave">保存</div>
+        <div class="btnsave" @click="saveEdit">保存</div>
         <div class="btnclose" @click="closeEdit">取消</div>
       </div>
 
@@ -230,7 +230,7 @@ import http from "@/utils/request.js";
 import mapTown from "@/assets/json/ly.json";
 import { VideoCamera } from "@element-plus/icons-vue";
 // import xkz from "@/assets/json/xkz.json";
-import cssj from "@/assets/json/cssj.json";
+// import cssj from "@/assets/json/cssj.json";
 import j0 from "@/assets/images/map/j0.png";
 import j1 from "@/assets/images/map/j1.png";
 import j2 from "@/assets/images/map/j2.png";
@@ -281,7 +281,11 @@ const cs_un_choose_arr = ref([]); //单点社区其他区块(灰色)
 const cs_dd_arr = ref([]); //单点社区名
 //存放村社区块
 const csqk = ref({});
-// var cssj
+var cssj;
+//存放村社id用于编辑
+const changeCsqkId = ref("");
+//用于显示编辑栏
+const showEdit = ref(false);
 //头部标题
 const title_choose = ref("");
 const title_jd = ref("");
@@ -804,8 +808,8 @@ const initMap = () => {
   //添加街道名
   addJd();
 };
-const getCssj = () => {
+const getCssj = async () => {
-  http
+  await http
     .get("/api/ggfwyth/regionalDivision/getCsRegionalDivision")
     .then((res) => {
       if (res.code == 200) {
@@ -813,9 +817,8 @@ const getCssj = () => {
       }
     });
 };
-
+//存放编辑的地块数据
 var arrJWD = [[[]]];
-var arr1;
 //百度bd09墨卡托坐标转换百度bd09经纬度坐标
 const bd09 = (x, y) => {
   var ggPoint = new BMapGL.Point(x, y);
@@ -823,7 +826,7 @@ const bd09 =  (x, y) => {
   pointArr.push(ggPoint);
   var convertor = new BMapGL.Convertor();
   convertor.translate(pointArr, COORDINATES_BD09_MC, COORDINATES_BD09, (e) => {
-    arr1 = [];
+    let arr1 = [];
     arr1.push(e.points[0].lng);
     arr1.push(e.points[0].lat);
     console.log("arr1", arr1);
@@ -832,28 +835,66 @@ const bd09 =  (x, y) => {
 };
 //开启编辑
 const openEdit = () => {
+  arrJWD = [[[]]];
   cs_choose_arr.value[0].enableEditing();
   console.log(cs_choose_arr.value[0]);
 };
 
-//关闭编辑
+//保存编辑
-const closeEdit = async () => {
+const saveEdit = async () => {
   cs_choose_arr.value[0].disableEditing();
   console.log(cs_choose_arr.value[0]);
   for (const item of cs_choose_arr.value[0].points) {
     if (item?.latLng) {
-      arr1 = [];
+      let arr1 = [];
       arr1.push(item?.latLng.lng);
       arr1.push(item?.latLng.lat);
       arrJWD[0][0].push(arr1);
     } else {
       bd09(item.lng, item.lat);
       //延迟0.1秒，保证convertor.translate执行完
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
   }
   console.log("arrJWD", arrJWD);
+  saveDK();
 };
+//取消编辑
+const closeEdit = async () => {
+  cs_choose_arr.value[0].disableEditing();
+  cs_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_choose_arr.value[index]);
+  });
+  addCsChoose();
+  showEdit.value = false;
+};
+//上传编辑的地块
+const saveDK = async () => {
+  await http
+    .post(
+      `/api/ggfwyth/regionalDivision/addCsManagerRegionalDivision?id=${
+        changeCsqkId.value
+      }&data=${JSON.stringify(arrJWD)}`
+    )
+    .then((res) => {
+      if (res.code == 200) {
+        ElMessage.success("编辑成功");
+      }
+    });
+  await getCssj();
+  await loadCs(cfJd.value);
+  cs_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_choose_arr.value[index]);
+  });
+  chooseCsList.value.length = 0;
+  xkzDk.forEach((itemm, indexx) => {
+    if (itemm.name == cfCs.value) {
+      chooseCsList.value.push(itemm);
+      addCsChoose();
+    }
+  });
+};
+
 //点击龙游县初始化
 const csh = () => {
   clear();
@@ -2526,7 +2567,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
 //------------------------------
 //---------村社级别------------
 //加载村社信息
-const loadCs = (name) => {
+const loadCs = async (name) => {
   xkzCenter.length = 0;
   xkzDk.length = 0;
   cssj.forEach((item, index) => {
@@ -2539,20 +2580,24 @@ const loadCs = (name) => {
       for (let w in v.geometry.coordinates) {
         if (v.geometry.coordinates[w][0].length < 60) continue;
         xkzDk.push({
+          id: v.id,
           name: v.properties.name,
           point: v.geometry.coordinates[w],
         });
       }
       xkzCenter.push({
+        id: v.id,
         name: v.properties.name,
         center: v.properties.center,
       });
     } else {
       xkzDk.push({
+        id: v.id,
         name: v.properties.name,
         point: v.geometry.coordinates[0],
       });
       xkzCenter.push({
+        id: v.id,
         name: v.properties.name,
         center: v.properties.center,
       });
@@ -2654,18 +2699,6 @@ const addCsChoose = () => {
         zIndex: 99,
       });
       map.addOverlay(cs_choose_arr.value[index]);
-      cs_choose_arr.value[index].addEventListener("click", (e) => {
-        console.log(4444444444, e);
-
-        // e.overlay 可能包含了你点击的面
-        if (e.overlay && e.overlay.type === "Polygon") {
-          var vertices = e.overlay.getPath(); // 获取面的所有顶点
-          var coordinates = vertices.map(function (point) {
-            return { lng: point.lng, lat: point.lat };
-          });
-          console.log(coordinates); // 打印所有坐标
-        }
-      });
     }
   });
 };
@@ -2941,6 +2974,11 @@ const DGcreateCs = (polygon, indexx) => {
     },
   });
   map.addOverlay(cs_dd_arr.value[indexx]);
+  cs_dd_arr.value[indexx].addEventListener("click", () => {
+    console.log(polygon.id);
+    changeCsqkId.value = polygon.id;
+    showEdit.value = !showEdit.value;
+  });
 };
 //添加单个村社(+数量)
 const DGcreateCs2 = (polygon, indexx) => {
@@ -3061,7 +3099,7 @@ onMounted(async () => {
   getData();
   BMAP();
   getFwq();
-  // getCssj();
+  getCssj();
   await getDataBq();
   loadingss.value = false;
 });
@@ -3633,8 +3671,8 @@ onMounted(async () => {
   z-index: 999;
   position: absolute;
   color: #ffffff;
-  top: 120px;
+  top: 15%;
-  left: 600px;
+  right: 30%;
   display: flex;
   cursor: pointer;
   .btnopen {