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

src/views/system/inspection/Task/addTask.vue

@@ -57,14 +57,12 @@
             </el-checkbox-group>
           </el-form-item> -->
           <el-form-item label="关联计划" props="planId">
-            <el-select @change="handlChangeMap" v-model="form.planId" placeholder="请选择" style="width: 100%">
+            <el-select @change="handleChangeMap" v-model="form.planId" placeholder="请选择" style="width: 100%">
               <el-option v-for="item in planlist" :key="item.id" :label="item.planName" :value="item.id" />
             </el-select>
           </el-form-item>
           <el-form-item label="计划路线" props="planId">
-            <div class="mapbox" v-loading="maploading">
-              <div class="w-full h-full" id="TaskMapBox"></div>
-            </div>
+            <GD v-loading="maploading" ref="GDef" :disabled="true"></GD>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="submit">提交</el-button>
@@ -81,11 +79,11 @@ import RepairUser from '@/components/Holder/repairUser.vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 import { ref } from 'vue';
-import AMapLoader from '@amap/amap-jsapi-loader';
 import { listPlan } from '@/api/system/InspectionPlan';
 import { addTask, getTask, updateTask } from '@/api/system/InspectionTask';
 import { getRoute } from '@/api/system/InspectionRoute';
-import { RouteVO } from '@/api/system/InspectionRoute/type';
+
+import GD from '@/components/Map/GD.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_inspection_remind_tiime } = toRefs<any>(proxy?.useDict('com_inspection_remind_tiime'));
@@ -148,13 +146,11 @@ async function init() {
       };
       taskTime.value = res.data.taskTime ? res.data.taskTime.split(' - ') : [];
       checkoutUserlist.value = Array.isArray(res.data.inspectorInfo) ? res.data.inspectorInfo : [res.data.inspectorInfo];
-      handlChangeMap(res.data.planId);
+      handleChangeMap(res.data.planId);
     });
   }
 }
 
-init();
-
 // 选择 巡检人员
 const RepairUserRef = ref<InstanceType<typeof RepairUser>>();
 function handleAddUser() {
@@ -172,101 +168,47 @@ function handleDelete(id) {
 function routeback() {
   router.back();
 }
-
-const AMapLib = ref(null);
-const map = ref(null);
-const mapReady = ref(false);
-
 const maploading = ref(false);
-// 地图覆盖物
-const markerlist = [];
 
-// 选择计划f
-function handlChangeMap(val: string) {
-  // 清楚 覆盖物
-  if (markerlist.length > 0) {
-    map.value.remove(markerlist);
-  }
-  if (val) {
-    // 查找计划id
-    const find = planlist.value.find((item) => item.id === val);
-    if (find) {
-      const route = find.routeList.pop();
-      // 查找路线
-      getRoute(route.id).then((res) => {
-        handleRoute(res.data);
-      });
-    }
-  }
-}
+const GDef = ref(null);
 
-// 处理 巡检路线 巡检点数据
-function handleRoute(route: RouteVO) {
+function handleChangeMap(val: string) {
   maploading.value = true;
-  // ! 添加点
-  if (route.points && route.points.length > 0) {
-    route.points.forEach((item, index) => {
-      const lnglat = item.location.split(',').map(Number);
-      const marker = new AMapLib.value.Marker({
-        position: new AMapLib.value.LngLat(lnglat[0], lnglat[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        title: item.pointName,
-        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 + 1}</div>
-    </div>`
-      });
-      //将创建的点标记添加到已有的地图实例：
-      map.value.add(marker);
-      markerlist.push(marker);
-    });
+  const find = planlist.value.find((item) => item.id === val);
+  if (find) {
+    const route = find.routeList[find.routeList.length - 1];
+    if (route) {
+      getRoute(route.id)
+        .then((res) => {
+          if (res) {
+            GDef.value.clearMapMarker();
+            if (res.data.points && res.data.points.length > 0) {
+              res.data.points.forEach((item) => {
+                const angular = item.location.split(',').map(Number).filter(Boolean);
+                GDef.value.addMarker_more(angular, item.pointName, item.id);
+              });
+            }
+            // 巡检路线
+            if (res.data.pathPoints) {
+              GDef.value.renderSavedPath(res.data.pathPoints);
+            }
+          }
+        })
+        .finally(() => {
+          maploading.value = false;
+        });
+    } else {
+      maploading.value = false;
+    }
+  } else {
+    maploading.value = false;
   }
-  // ! 添加路线
-  if (route.pathPoints && typeof route.pathPoints === 'string') {
-    const path = JSON.parse(route.pathPoints);
-    //创建 Polyline 实例
-    const polyline = new AMapLib.value.Polyline({
-      path: path,
-      strokeWeight: 2, //线条宽度
-      strokeColor: 'red', //线条颜色
-      lineJoin: 'round' //折线拐点连接处样式
-    });
-    map.value.add(polyline);
-    markerlist.push(polyline);
-  }
-
-  // 自动 适应 范围
-  map.value.setFitView();
-  maploading.value = false;
 }
 
-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 () => {
-  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('TaskMapBox', {
-      viewMode: '3D',
-      zoom: 11,
-      center: [116.397428, 39.90923]
-    });
-    mapReady.value = true;
-  });
+onMounted(() => {
+  init();
 });
+
 const formRef = ref();
 function submit() {
   if (taskTime.value.length > 0) {