[Style 0000] 地图样式和交互优化

src/layouts/default/feature/SimpleMap.vue

@@ -2,7 +2,7 @@
   <div ref="mapContainer" class="map-container"></div>
   <div class="map-container cad-container" id="map2dContainer"></div>
   <div v-if="!isTopLevel" class="map-reset-btn">
-    <Button type="primary" @click="revertStack">返回上级</Button>
+    <Button :loading="mapLoading" type="primary" @click="revertStack">返回上级</Button>
   </div>
   <div
     id="map-copyright"
@@ -25,7 +25,7 @@
 <script lang="ts" setup>
   import 'vjmap/dist/vjmap.min.css';
   import { ref, onMounted, onUnmounted, computed } from 'vue';
-  import { Button, message } from 'ant-design-vue';
+  import { Button } from 'ant-design-vue';
   import { useAppStore } from '/@/store/modules/app';
   // import { useRoute } from 'vue-router';
   import vjmap from 'vjmap';
@@ -38,9 +38,11 @@
   import { generatePopupContent, generateSimplePopup } from './hooks/popup';
   import { initMap2d, renderGoafMarkers } from '/@/views/system/cadFile/app';
   import { getGoafList } from '/@/views/system/cadFile/cad.api';
+  // import { useGlobSetting } from '/@/hooks/setting';
 
   const appStore = useAppStore();
   const mineStore = useMineDepartmentStore();
+  // const globSetting = useGlobSetting();
   appStore.setSimpleMapParams({ deptId: mineStore.getRootId, isLeaf: mineStore.getRoot?.isLeaf });
   // const route = useRoute();
 
@@ -104,13 +106,18 @@
     // 设置 hover 鼠标指针样式和状态更新
     circles.hoverPointer();
     circles.hoverFeatureState();
-    circles.hoverPopup((f) => {
-      if (f.properties.isLeaf) {
-        return generatePopupContent(f.properties);
-      } else {
-        return generateSimplePopup(f.properties);
+    circles.hoverPopup(
+      (f) => {
+        if (f.properties.isLeaf) {
+          return generatePopupContent(f.properties);
+        } else {
+          return generateSimplePopup(f.properties);
+        }
+      },
+      {
+        maxWidth: '500px',
       }
-    });
+    );
 
     const symbols = new vjmap.Symbol({
       layerId: SYMBOL_LAYER_ID,
@@ -180,44 +187,50 @@
     return map;
   }
 
+  const mapLoading = ref(false);
   let cadOpened: boolean;
   /** 切换CAD地图和瓦片地图的显示，通过重新初始化进行切换，避免出现动画异常和多个DOM节点 */
   async function toggleCADMap(visiable: boolean) {
     if (cadOpened === visiable) return;
 
     cadOpened = visiable;
+    mapLoading.value = true;
     map?.destory();
-    if (visiable) {
-      const hide = message.loading('CAD图加载中...', 0);
-      const [m, res] = await Promise.all([
-        initMap2d(mapContainer.value!, {
-          // fileUrl: node.url
-          style: { backcolor: 0xe6f3ff },
-        }),
-        getGoafList({
-          mineCode: mineStore.getRoot?.fax,
-          deptId: mineStore.getRootId,
-        }),
-      ]);
-      hide();
-      map = m;
-
-      renderGoafMarkers(res); // 渲染标记
-    } else {
-      // const hide = message.loading('地图加载中...', 0);
-      const [m, res] = await Promise.all([
-        initMap(mapContainer.value!),
-        getGeoJSON({
-          deptId: mineStore.getRootId,
-          pageSize: 9999,
-        }),
-      ]);
-      const [geojson, __, markers] = res;
-      // hide();
-      map = m;
-
-      initMapGeoJSON(map, geojson);
-      initMapMarker(map, markers);
+
+    try {
+      if (visiable) {
+        const [m, res] = await Promise.all([
+          initMap2d(mapContainer.value!, {
+            // fileUrl: node.url
+            // fileUrl: `${globSetting.apiUrl}/sys/common/static/webfile/hongliulin_default.dwg`,
+            style: { backcolor: 0xe6f3ff },
+          }),
+          getGoafList({
+            mineCode: mineStore.getRoot?.fax,
+            deptId: mineStore.getRootId,
+          }),
+        ]);
+        map = m;
+
+        renderGoafMarkers(res); // 渲染标记
+      } else {
+        // const hide = message.loading('地图加载中...', 0);
+        const [m, res] = await Promise.all([
+          initMap(mapContainer.value!),
+          getGeoJSON({
+            deptId: mineStore.getRootId,
+            pageSize: 9999,
+          }),
+        ]);
+        const [geojson, __, markers] = res;
+        // hide();
+        map = m;
+
+        initMapGeoJSON(map, geojson);
+        initMapMarker(map, markers);
+      }
+    } finally {
+      mapLoading.value = false;
     }
   }
 

src/layouts/default/feature/hooks/popup.ts

@@ -25,6 +25,7 @@ export function generatePopupContent(data: any): string {
   }, '');
 
   return `
+  <div style="width: 330px">
     <div class="vjmapgis-popup-content__title">${mineName}</div>
     <div class="vjmapgis-popup-content__divider"></div>
     <div class="vjmapgis-popup-content__board mb-1">
@@ -53,6 +54,7 @@ export function generatePopupContent(data: any): string {
         ${tbodyInnerHtml.length ? tbodyInnerHtml : '<tr><td colspan="4">暂无数据</td></tr>'}
       </tbody>
     </table>
+  </div>
   `;
 }