地图街道编辑

src/view/sy_map_fb.vue

@@ -80,7 +80,7 @@
       </div>
       <div
         class="btnBj"
-        v-if="!showEdit && !dialogShow && !openD"
+        v-if="!showEdit && !dialogShow && !openD && !showEdit2"
         @click="openqx()"
       >
         地图权限：
@@ -90,6 +90,16 @@
         选择编辑：
         <p>{{ is_type }}</p>
       </div>
+      <div class="btnsopen" @click="openBjl" v-if="!showEdit && !showEdit2">
+        <div class="btnsave">打开编辑栏</div>
+      </div>
+      <div class="btns" v-if="showEdit2">
+        <div style="display: flex">
+          <div class="btnsave" @click="openEdit2">编辑地块</div>
+          <div class="btnsave" @click="saveEdit2">保存地块</div>
+          <div class="btnsave" @click="closeEdit2">退出编辑</div>
+        </div>
+      </div>
       <!-- 加载动画 -->
       <div class="loadBody" v-show="loadingss">
         <div class="load">
@@ -240,6 +250,35 @@ const addPd = computed(() => {
     return false;
   }
 });
+//打开编辑栏
+const openBjl = () => {
+  if (!jsqx.value) {
+    ElMessage({
+      message: "您没有编辑的权限",
+      type: "warning",
+    });
+    return;
+  }
+  if (is_type.value == "街道") {
+    if (changeJdqkId.value) {
+      showEdit2.value = true;
+    } else {
+      ElMessage({
+        message: "请先选择街道",
+        type: "warning",
+      });
+    }
+  } else {
+    if (changeCsqkId.value) {
+      showEdit.value = true;
+    } else {
+      ElMessage({
+        message: "请先选择村社",
+        type: "warning",
+      });
+    }
+  }
+};
 //编辑村名
 const input1 = ref("");
 const input2 = ref([]);
@@ -268,8 +307,11 @@ const csqk = ref({});
 var cssj;
 //存放村社id用于编辑
 const changeCsqkId = ref("");
+//存放街道id用于编辑
+const changeJdqkId = ref("");
 //用于显示编辑栏
 const showEdit = ref(false);
+const showEdit2 = ref(false);
 const xuanzhongCs = ref([]);
 //存放街道
 const cfJd = ref("");
@@ -434,10 +476,12 @@ const lx = () => {
   if (is_type.value == "街道") {
     ElMessageBox.confirm("是否切换至村社?")
       .then(() => {
-        console.log(is_type.value);
+        if (showEdit2.value) {
-        is_type.value = "村社";
+          ElMessage.warning("请先退出街道编辑模式");
-        csh();
+        } else {
-        console.log(is_type.value);
+          is_type.value = "村社";
+          csh();
+        }
       })
       .catch(() => {});
   } else {
@@ -600,6 +644,7 @@ const moveBack = () => {
   addCsChoose();
   move_mode.value = false;
   drawing.value = false;
+  BMAP();
 };
 //移动保存
 const moveDK = async () => {
@@ -664,7 +709,6 @@ const openEdit = () => {
   drawing.value = true;
   console.log(cs_choose_arr.value[0]);
 };
-
 //保存编辑
 const saveEdit = async () => {
   cs_choose_arr.value[0].disableEditing();
@@ -684,6 +728,35 @@ const saveEdit = async () => {
   console.log("arrJWD", arrJWD);
   saveDK();
 };
+const saveDK = async () => {
+  loadingss.value = true;
+  let sj = {
+    id: changeCsqkId.value,
+    data: JSON.stringify(arrJWD),
+  };
+  await http
+    .post(`/api/ggfwyth/regionalDivision/editVillage`, sj)
+    .then((res) => {
+      if (res.code == 200) {
+        ElMessage.success({
+          message: "保存成功",
+        });
+      }
+    });
+  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();
+    }
+  });
+  loadingss.value = false;
+};
 //取消编辑
 const closeEdit = async () => {
   cs_choose_arr.value[0].disableEditing();
@@ -693,6 +766,7 @@ const closeEdit = async () => {
   addCsChoose();
   edit_mode.value = false;
   drawing.value = false;
+  BMAP();
 };
 //退出
 const backEdit = () => {
@@ -700,6 +774,71 @@ const backEdit = () => {
   showEdit.value = false;
   drawing.value = false;
 };
+//开启编辑街道----------
+const openEdit2 = () => {
+  map.removeEventListener("click", markera);
+  if (currentMarker !== null) {
+    map.removeOverlay(currentMarker);
+  }
+  arrJWD = [[[]]];
+  jd_choose_arr.value[0].enableEditing();
+  drawing.value = true;
+  console.log(jd_choose_arr.value[0]);
+};
+const saveEdit2 = async () => {
+  jd_choose_arr.value[0].disableEditing();
+  console.log(jd_choose_arr.value[0]);
+  for (const item of jd_choose_arr.value[0].points) {
+    if (item?.latLng) {
+      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, 300));
+    }
+  }
+  console.log("arrJWD", arrJWD);
+  saveDK2();
+};
+const saveDK2 = async () => {
+  loadingss.value = true;
+  let sj = {
+    id: changeJdqkId.value,
+    data: JSON.stringify(arrJWD),
+  };
+  console.log(sj);
+
+  await http
+    .post(`/api/ggfwyth/regionalDivision/updateTown`, sj)
+    .then((res) => {
+      if (res.code == 200) {
+        ElMessage.success({
+          message: "保存成功",
+        });
+      }
+    });
+  await getXzsj();
+  await loadTown();
+  map.clearOverlays();
+  addPolygonCounty();
+  //添加街道名
+  addJd();
+  xrJd(cfJd.value);
+  loadingss.value = false;
+};
+const closeEdit2 = async () => {
+  jd_choose_arr.value[0].disableEditing();
+  jd_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(jd_choose_arr.value[index]);
+  });
+  addJdChoose();
+  showEdit2.value = false;
+  drawing.value = false;
+};
+//-----------------------------
 //批量修改村社位置
 // const shangchuan = async () => {
 //   //上传地块0.00328
@@ -740,35 +879,7 @@ const backEdit = () => {
 //   }
 // };
 //上传编辑的地块
-const saveDK = async () => {
+
-  loadingss.value = true;
-  let sj = {
-    id: changeCsqkId.value,
-    data: JSON.stringify(arrJWD),
-  };
-  await http
-    .post(`/api/ggfwyth/regionalDivision/editVillage`, sj)
-    .then((res) => {
-      if (res.code == 200) {
-        ElMessage.success({
-          message: "保存成功",
-        });
-      }
-    });
-  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();
-    }
-  });
-  loadingss.value = false;
-};
 //修改村名
 const nameEdit = () => {
   dialogVisible.value = true;
@@ -1088,8 +1199,6 @@ const csh = () => {
     map.removeOverlay(currentMarker);
   }
   goMapCenter([119.178783, 29.034583], 11);
-  getData();
-  getDataBq();
 };
 //清空村社的数据
 const clear = () => {
@@ -1125,6 +1234,7 @@ const clear = () => {
   xkzCenter.length = 0;
   xkzDk.length = 0;
   changeCsqkId.value = "";
+  changeJdqkId.value = "";
 };
 //定义地图中点
 const goMapCenter = (point, zoom) => {
@@ -1159,7 +1269,11 @@ const markera = (e) => {
 
 //-------乡镇街道级别---------
 //加载乡镇信息
-const loadTown = () => {
+const loadTown = async () => {
+  mapTownDataDK.length = 0;
+  mapTownCount.forEach((item) => {
+    item.center = [];
+  });
   for (let v of mapTown[0].features) {
     if (v.geometry.coordinates.length > 1) {
       for (let w in v.geometry.coordinates) {
@@ -1247,11 +1361,15 @@ const addPolygonCounty = () => {
       map.addOverlay(polygon);
       polygon.addEventListener("click", async () => {
         if (is_type.value == "街道") {
+          // if (showEdit2.value) {
+          //   return;
+          // }
           if (item.name == cfJd.value) {
           } else {
             console.log(item.id);
 
             cfJd.value = item.name;
+            changeJdqkId.value = item.id;
             // cs_qk_arr.value.forEach((item, index) => {
             //   map.removeOverlay(cs_qk_arr.value[index]);
             // });
@@ -1419,6 +1537,11 @@ const addPolygonCountyCs = () => {
           if (drawing.value) {
             return;
           }
+          //编辑模式下
+          // if (showEdit.value) {
+
+          changeCsqkId.value = item.id;
+          // }
           loadingss.value = true;
           cs_dd_arr.value = [];
           xuanzhongCs.value = [];
@@ -1503,9 +1626,10 @@ const addCsUnChoose = () => {
           return;
         }
         //编辑模式下
-        if (showEdit.value) {
+        // if (showEdit.value) {
-          changeCsqkId.value = item.id;
+
-        }
+        changeCsqkId.value = item.id;
+        // }
         //
         loadingss.value = true;
         cfCs.value = item.name;
@@ -1659,11 +1783,11 @@ const DGcreateCs = (polygon, indexx) => {
   });
   map.addOverlay(cs_dd_arr.value[indexx]);
   cs_dd_arr.value[indexx].addEventListener("click", () => {
-    if (jsqx.value) {
+    // if (jsqx.value) {
-      showEdit.value=true;
+    //   showEdit.value = true;
-      changeCsqkId.value = polygon.id;
+    changeCsqkId.value = polygon.id;
-    } else {
+    // } else {
-    }
+    // }
   });
 };
 //适配
@@ -1894,4 +2018,18 @@ onMounted(async () => {
   align-items: center;
   opacity: 0.8;
 }
+.btnsopen {
+  cursor: pointer;
+  z-index: 100;
+  position: absolute;
+  color: #ffffff;
+  top: 20%;
+  left: 5%;
+  background: #7aceff;
+  padding: 5px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  opacity: 0.8;
+}
 </style>

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        // target: "http://10.0.0.65:8095/", //刘进
+        target: "http://10.0.0.65:8095/", //刘进
-        target: "http://220.191.238.50:996/", //线上
+        // target: "http://220.191.238.50:996/", //线上
         changeOrigin: true, //是否支持跨域
         //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
       },