6/23 更改高德地图组件，统一入口

src/views/system/inspection/Route/addInspectionRoute.vue

@@ -8,19 +8,6 @@
           <el-form-item label="巡检路线名称" prop="routeName">
             <el-input v-model.trim="form.routeName" placeholder="请输入巡检路线名称" />
           </el-form-item>
-          <!-- <el-form-item label="巡检路线描述" prop="description">
-            <el-input type="textarea" :rows="3" v-model.trim="form.description" placeholder="请输入巡检路线描述" />
-          </el-form-item> -->
-          <!-- <el-form-item label="预计巡检时长" prop="estimatedTime">
-            <el-input v-model.trim.number="form.estimatedTime" placeholder="预计巡检时长">
-              <template #append>分钟</template>
-            </el-input>
-          </el-form-item> -->
-          <!-- <el-form-item label="巡检路线状态" prop="routeStatus">
-            <el-radio-group v-model="form.routeStatus">
-              <el-radio v-for="(item, index) in com_inspection_route_status" :key="index" :value="item.value" :label="item.label"></el-radio>
-            </el-radio-group>
-          </el-form-item> -->
           <el-form-item label="巡检点">
             <div class="itembox">
               <div
@@ -28,8 +15,8 @@
                 :class="{
                   active: checkoutPointlist.includes(item.id)
                 }"
-                @click="checkoutItem(item.id)"
                 v-for="(item, index) in pointslist"
+                @click="checkoutItemPoint(item)"
                 :key="index"
               >
                 <el-icon v-show="checkoutPointlist.includes(item.id)"><Check /></el-icon>
@@ -38,11 +25,19 @@
             </div>
           </el-form-item>
           <el-form-item label="绘制巡检路线">
-            <div class="map" id="containerMap"></div>
+            <GD :small-scroll="true" ref="GDef" :click-or-draw="false"></GD>
             <div class="tips flex flex-items-center justify-between">
               <div>点击地图，绘制巡检路线；再次点击可继续绘制下一条（但只能保留一条）</div>
               <div>
-                <span class="deleteMarker" @click="clearAll">清空所有路线</span>
+                <span
+                  class="deleteMarker"
+                  @click="
+                    () => {
+                      GDef.clearAll();
+                    }
+                  "
+                  >清空所有路线</span
+                >
               </div>
             </div>
           </el-form-item>
@@ -62,11 +57,11 @@ import { useRouter, useRoute } from 'vue-router';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { listPoint } from '@/api/system/InspectionPoint';
 import { onMounted, onUnmounted } from 'vue';
-import AMapLoader from '@amap/amap-jsapi-loader';
 import { addRoute, getRoute, updateRoute } from '@/api/system/InspectionRoute';
-import { getVillageByIdAPI } from '@/api/system/community';
 import { Check } from '@element-plus/icons-vue';
 
+import GD from '@/components/Map/GD.vue';
+
 const router = useRouter();
 const route = useRoute();
 
@@ -90,65 +85,12 @@ const rules = ref({
   estimatedTime: [{ required: true, message: '请输入预计巡检时长', trigger: 'blur' }]
 });
 
-// !== 初始化 =============================================================================
+const GDef = ref();
 const routeid = ref(null);
 // 巡检点 列表
 const pointslist = ref([]);
-
 // 选择巡检点列表
 const checkoutPointlist = ref([]);
-function checkoutItem(id: string) {
-  if (checkoutPointlist.value.includes(id)) {
-    checkoutPointlist.value = checkoutPointlist.value.filter((item) => item !== id);
-    removePointMarker(id);
-  } else {
-    checkoutPointlist.value.push(id);
-    const find = pointslist.value.find((item) => item.id === id);
-    if (find && find.location) {
-      if (find && find.location) {
-        addPointMarker(id, find.location, find.pointName);
-      }
-    }
-  }
-  // 调整地图视野以适应所有 marker
-  map.value.setFitView();
-}
-// 添加 marker
-function addPointMarker(id: string, location: string, title?: string) {
-  if (!map.value || !AMapLib.value) return;
-  const [lng, lat] = location.split(',').map((v) => Number(v.trim()));
-  if (!Number.isFinite(lng) || !Number.isFinite(lat)) return;
-  // 获取到经纬度后，添加 marker 数组
-  const lnglat = new AMapLib.value.LngLat(lng, lat);
-  const index = Object.keys(markers.value).length + 1; // 获取当前 marker 数量，作为新的 marker 的编号
-  markers.value[id] = new AMapLib.value.Marker({
-    position: lnglat,
-    map: map.value,
-    title: title || '巡检点',
-    label: title || '巡检点',
-    content: `
-    <div style="display:flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:18px;border-radius:50%;background-color:rgba(26,117,255,0.3);">
-      <div
-        style=" width: 20px;
-          border-radius: 50%;
-          height: 20px;
-          line-height: 20px;
-          background-color: rgba(26,117,255,1);
-          color: #ffffff;
-          font-size: 20px;
-          text-align: center;"
-      >${index}</div>
-    </div>`
-  });
-}
-// 移除 marker
-function removePointMarker(id: string) {
-  const markerItem = markers.value[id];
-  if (markerItem) {
-    map.value.remove(markerItem);
-    delete markers.value[id];
-  }
-}
 
 // ! 初始化 =========================================================================
 function init() {
@@ -177,30 +119,31 @@ function init() {
             checkoutPointlist.value.forEach((id) => {
               const find = res.data.points.find((item) => item.id === id);
               if (find && find.location) {
-                addPointMarker(id, find.location, find.pointName);
+                // addPointMarker(id, find.location, find.pointName);
+                const location = find.location
+                  .split(',')
+                  .map((item) => Number(item))
+                  .filter((item) => !Number.isNaN(item));
+                if (location.length >= 2) {
+                  GDef.value.addMarker_more(location, find.pointName, find.id);
+                }
               }
             });
           }
           // 回显路线
           if (res.data.pathPoints) {
-            renderSavedPath(res.data.pathPoints);
+            // renderSavedPath(res.data.pathPoints);
+            setTimeout(() => {
+              GDef.value.renderSavedPath(res.data.pathPoints);
+            }, 800);
           }
         }
       });
     });
   }
 }
-// ! map
-const mapReady = ref(false);
-const AMapLib = ref(null);
 const map = ref<any>(null);
-const markers = ref<Record<string, any>>({});
 
-const mouseTool = ref(null);
-const drawnPolylines = ref([]); // 存所有线条
-const villageid = localStorage.getItem('villageid');
-const aloaderkey = import.meta.env.VITE_GCJ02_KEY_GD;
-const VITE_GCJ02_JS_CODE_GD = import.meta.env.VITE_GCJ02_JS_CODE_GD;
 onMounted(async () => {
   // 获取巡检点列表
   if (!routeid.value) {
@@ -208,183 +151,47 @@ onMounted(async () => {
       pointslist.value = res.rows;
     });
   }
-  await nextTick();
-  window._AMapSecurityConfig = { securityJsCode: VITE_GCJ02_JS_CODE_GD };
-  AMapLoader.load({
-    key: aloaderkey,
-    version: '2.0',
-    plugins: ['AMap.Scale', 'AMap.Marker']
-  }).then(async (AMap) => {
-    AMapLib.value = AMap;
-    map.value = new AMap.Map('containerMap', {
-      viewMode: '3D',
-      zoom: 11
-    });
-
-    const villageinfo = await getVillageByIdAPI(villageid);
-    AMap.plugin('AMap.Geocoder', function () {
-      const city = villageinfo.data.city.replaceAll('/', '');
-      const geocoder = new AMap.Geocoder({
-        city: city // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
-      });
-      geocoder.getLocation(city, function (status, result) {
-        if (status === 'complete' && result.info === 'OK') {
-          // result中对应详细地理坐标信息
-          map.value.setCenter(result.geocodes[0].location.toArray());
-        }
-      });
-    });
-
-    mapReady.value = true;
-
-    // 初始化绘图插件 MouseTool
-    AMap.plugin(['AMap.MouseTool'], () => {
-      mouseTool.value = new AMap.MouseTool(map.value);
-      // ✅ 只在这里调用一次，不要重复调用
-      // 监听绘制（全局只绑定一次！）
-      mouseTool.value.on('draw', (e) => {
-        if (!e.obj) return;
-        // ==========================================
-        // 核心：永远只保留一条线，画新的自动删旧的
-        // ==========================================
-        if (drawnPolylines.value.length > 0) {
-          map.value.remove(drawnPolylines.value[0]);
-        }
-        drawnPolylines.value = [e.obj];
-        // 画完继续允许画下一条（但永远只保留一条）
-        initDrawTool();
-      });
-      initDrawTool();
-    });
-    init();
-  });
+  await nextTick(() => init());
 });
 
-// 回显
-function renderSavedPath(pathStr: string) {
-  if (!pathStr || !map.value || !AMapLib.value) return;
-
-  try {
-    const path = JSON.parse(pathStr);
-    if (!Array.isArray(path) || path.length === 0) return;
-
-    // 先清空旧路线
-    drawnPolylines.value.forEach((line) => {
-      map.value.remove(line);
-    });
-    drawnPolylines.value = []; // 🔴 清空数组
-
-    // 只回显一条
-    const polyline = new AMapLib.value.Polyline({
-      path: path,
-      strokeColor: '#3366FF',
-      strokeOpacity: 1,
-      strokeWeight: 3,
-      strokeStyle: 'solid',
-      map: map.value
-    });
-
-    drawnPolylines.value.push(polyline); // ✅ 只一条
-    map.value.setFitView(polyline);
-  } catch (e) {
-    console.error('路线解析失败', e);
-  }
-}
-
-// 初始化绘图（只执行一次，防止事件重复绑定）
-function initDrawTool() {
-  if (!mouseTool.value) return;
-
-  // 先关闭可能存在的绘图
-  mouseTool.value.close(false);
-
-  // 开启折线绘制
-  mouseTool.value.polyline({
-    strokeColor: '#3366FF',
-    strokeOpacity: 1,
-    strokeWeight: 3,
-    strokeStyle: 'solid'
-  });
-}
-
-// 清空所有画线
-function clearAll() {
-  if (mouseTool.value) {
-    mouseTool.value.close(true); // 关闭绘图并清空
-    drawnPolylines.value.forEach((line) => {
-      map.value.removeOverlay(line);
-    });
-    drawnPolylines.value = [];
-    initDrawTool();
-  }
-}
-
-// !!! 核心：获取绘制的路线经纬度数组
-function getPolylinePath() {
-  if (drawnPolylines.value.length === 0) return [];
-  // 获取最后一条线
-  const lastPolyline = drawnPolylines.value[drawnPolylines.value.length - 1];
-  // const lastLine = drawnPolylines.value.pop();
-  const path = lastPolyline.getPath().map((p) => [p.lng, p.lat]);
-  return path;
-}
-/**
- * 修复高德地图 Polyline 闭合路线最后一段不显示
- * 解决：最后两点坐标相同 → 长度0 → 不渲染
- */
-function fixClosePath(path: number[][]): number[][] {
-  if (!path || path.length < 2) return path;
-
-  const newPath = [...path];
-
-  // 如果是闭合路线（最后一点 ≈ 第一点）
-  const first = newPath[0];
-  const last = newPath[newPath.length - 1];
-
-  // 判断是否几乎重合
-  const isSame = Math.abs(last[0] - first[0]) < 1e-8 && Math.abs(last[1] - first[1]) < 1e-8;
-
-  if (isSame) {
-    // 【关键】最后一点极微小偏移，强制生成线段
-    newPath[newPath.length - 1] = [last[0] + 0.0000001, last[1] + 0.0000001];
-  }
-
-  return newPath;
-}
-
 // !== 提交 =============================================================================
 const submitForm = () => {
+  if (form.value.routeName.trim() === '') {
+    ElMessage.warning('请输入巡检路线名称');
+    return;
+  }
   formRef.value?.validate(async (valid: boolean) => {
-    // if (valid) {
-    // 获取路线经纬度
-    const path = getPolylinePath() as [number, number][];
-    if (path.length === 0) {
-      ElMessage.warning('请绘制巡检路线');
-      return;
-    }
-    // 转成字符串传给后端
-    const [start_lng, start_lat] = path.at(0) as [number, number];
-    const [end_lng, end_lat] = path.at(-1) as [number, number];
+    if (valid) {
+      // 获取路线经纬度
+      const path = GDef.value.getAllDrawLines() as [number, number][];
+      console.log(path);
+      if (path.length === 0) {
+        ElMessage.warning('请绘制巡检路线');
+        return;
+      }
+      // 转成字符串传给后端
+      const [start_lng, start_lat] = path.at(0) as [number, number];
+      const [end_lng, end_lat] = path.at(-1) as [number, number];
 
-    form.value.startLng = `${start_lng}`;
-    form.value.startLat = `${start_lat}`;
-    form.value.endLng = `${end_lng}`;
-    form.value.endLat = `${end_lat}`;
+      form.value.startLng = `${start_lng}`;
+      form.value.startLat = `${start_lat}`;
+      form.value.endLng = `${end_lng}`;
+      form.value.endLat = `${end_lat}`;
 
-    form.value.pathPoints = JSON.stringify(path);
-    form.value.totalPoints = checkoutPointlist.value.join(',');
-    if (routeid.value) {
-      updateRoute(form.value).then(() => {
-        ElMessage.success('编辑成功');
-        cancelForm();
-      });
-    } else {
-      addRoute(form.value).then(() => {
-        ElMessage.success('添加成功');
-        cancelForm();
-      });
+      form.value.pathPoints = JSON.stringify(path);
+      form.value.totalPoints = checkoutPointlist.value.join(',');
+      if (routeid.value) {
+        updateRoute(form.value).then(() => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addRoute(form.value).then(() => {
+          ElMessage.success('添加成功');
+          cancelForm();
+        });
+      }
     }
-    // }
   });
 };
 // 返回
@@ -392,6 +199,27 @@ const cancelForm = () => {
   router.back();
 };
 
+// 点击展现 巡检点
+function checkoutItemPoint(pop) {
+  const find = pointslist.value.find((item) => item.id === pop.id);
+  if (find && find.location) {
+    const locations =
+      find.location
+        .split(',')
+        .map((item: string) => Number(item))
+        .filter(Boolean) ?? [];
+    if (locations.length >= 2) {
+      GDef.value.addMarker_more(locations, find.pointName, find.id);
+      if (checkoutPointlist.value.includes(pop.id)) {
+        checkoutPointlist.value = checkoutPointlist.value.filter((item) => item !== pop.id);
+      } else {
+        checkoutPointlist.value.push(pop.id);
+      }
+    } else {
+      ElMessage.error(find.pointName + ' - 巡检点经纬度定位有误');
+    }
+  }
+}
 onUnmounted(() => {
   map.value?.destroy();
 });