[Feat 0000] 地图添加CAD图纸选择器

src/api/sys/map.ts

@@ -24,7 +24,7 @@ export function getShanxiGeoJSON() {
   return fetch('/js/shanxi.geo.json').then((r) => r.json());
 }
 
-export function getGeoJSON(params: any) {
+export function getMarkerCollection(params: any) {
   // const getFeatColor = (gb) => {
   //   const colorMap = {
   //     // 邮编前7位：颜色
@@ -157,7 +157,7 @@ export function getGeoJSON(params: any) {
   //   return false;
   // };
 
-  return Promise.all([getShanxiGeoJSON(), getMarkers(params)]).then(([geojson, { records }]) => {
+  return getMarkers(params).then(({ records }) => {
     const mineStore = useMineDepartmentStore();
 
     const map = new Map<string, any>();
@@ -244,6 +244,6 @@ export function getGeoJSON(params: any) {
       })),
     };
 
-    return [geojson, records, markers];
+    return [records, markers];
   });
 }

src/layouts/default/feature/SimpleMap.vue

@@ -3,6 +3,14 @@
   <div v-if="!isTopLevel" class="map-reset-btn">
     <Button :loading="mapLoading" type="primary" @click="revertStack">返回上级</Button>
   </div>
+  <div v-if="cadOpened" class="map-cad-btn">
+    <a-select
+      v-model:value="fileId"
+      :options="fileOptions"
+      :fieldNames="{ label: 'fileName', value: 'wjId' }"
+      @change="toggleCADMap(true)"
+    ></a-select>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -13,14 +21,14 @@
   // import { useRoute } from 'vue-router';
   import vjmap from 'vjmap';
   // import type vjmap3d from 'vjmap3d';
-  import { getGeoJSON, getShanxiGeoJSON } from '/@/api/sys/map';
+  import { getMarkerCollection, getShanxiGeoJSON } from '/@/api/sys/map';
   import { useMineDepartmentStore } from '/@/store/modules/mine';
   import { get, last } from 'lodash-es';
   // import { env } from '/@/views/system/cadFile/env';
   import { StatusColorEnum } from '/@/enums/jeecgEnum';
   import { generateSimplePopup } from './hooks/popup';
   import { initMap2d, renderGoafMarkers } from '/@/views/system/cadFile/app';
-  import { getGoafList } from '/@/views/system/cadFile/cad.api';
+  import { getGoafList, getMineFileList } from '/@/views/system/cadFile/cad.api';
   import LeafPopup from './components/LeafPopup.vue';
   import { watchTriggerable } from '@vueuse/core';
   import { findPath, listToTree } from '/@/utils/helper/treeHelper';
@@ -67,6 +75,8 @@
   // 用于存储历史节点的栈，实现返回上一级功能
   const historyStack = ref([DEFAULT_NODE]);
   const isTopLevel = computed(() => get(historyStack.value, 'length', 1) === 1);
+  const fileOptions = ref<any[]>([]);
+  const fileId = ref();
 
   /** 根据GeoJSON文件绘制省市边界和填充色到地图上，其将作为一个新图层 */
   function initMapGeoJSON(map: vjmap.Map, geojson) {
@@ -229,7 +239,7 @@
   }
 
   /** 切换CAD底图和瓦片地图底图的显示，通过重新初始化进行切换，避免出现动画异常和多个DOM节点 */
-  async function toggleCADMap(visiable: boolean, data?: any) {
+  async function toggleCADMap(visiable: boolean) {
     // CAD底图不显示的时候无需再次初始化地图，显示时需要根据data来切换不同图纸
     if (cadOpened === visiable && visiable === false) return;
 
@@ -238,18 +248,33 @@
     map?.destory();
 
     try {
-      if (visiable) {
+      let markers;
+
+      // 当不是静默状态时，需要标记点位信息来计算历史栈
+      if (!props.slience) {
+        const [records, mks] = await getMarkerCollection({
+          deptId: mineStore.getRootId,
+          pageSize: 9999,
+        });
+        markerCollection = listToTree(records, DEFAULT_TREE_CONFIG);
+        markers = mks;
+      }
+
+      if (cadOpened) {
+        // 如果当前选项下没有已选中的地图，那么意味着需要新获取选项，否则无需发请求
+        if (!fileOptions.value.some((e) => e.wjId === fileId.value)) {
+          const { records } = await getMineFileList({ deptId: mineStore.getDepartId, pageSize: 999 });
+          fileOptions.value = records;
+          fileId.value = get(records, '[0].wjId');
+        }
+
         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 },
-          }),
+          initMap2d(mapContainer.value!, { vjId: fileId.value, style: { backcolor: 0xe6f3ff } }),
           props.slience
             ? Promise.resolve([])
             : getGoafList({
-                mineCode: data ? data.mineCode : mineStore.getRoot?.fax,
-                deptId: data ? data.id : mineStore.getRootId,
+                mineCode: mineStore.getDepartId,
+                deptId: mineStore.getDepartId,
               }),
         ]);
         map = m;
@@ -257,21 +282,11 @@
         renderGoafMarkers(res); // 渲染标记
       } else {
         // const hide = message.loading('地图加载中...', 0);
-        const [m, res] = await Promise.all([
-          initMap(mapContainer.value!),
-          props.slience
-            ? getShanxiGeoJSON().then((r) => [r, [], []])
-            : getGeoJSON({
-                deptId: mineStore.getRootId,
-                pageSize: 9999,
-              }),
-        ]);
-        const [geojson, records, markers] = res;
+        const [m, res] = await Promise.all([initMap(mapContainer.value!), getShanxiGeoJSON()]);
         // hide();
-        markerCollection = listToTree(records, DEFAULT_TREE_CONFIG);
         map = m;
 
-        initMapGeoJSON(map, geojson);
+        initMapGeoJSON(map, res);
         initMapMarker(map, markers);
       }
     } catch (e) {
@@ -299,6 +314,7 @@
 
       // 不论是不是矿端，历史记录都是一样的，用户点击返回上一级都能正常返回
       historyStack.value = findPath(markerCollection, (n) => n.id === id) as any[];
+      console.log('debug findpath', markerCollection, historyStack.value);
 
       // 此外如果是非矿端那么模拟触发地图点击事件
       markerClickHandler();
@@ -379,4 +395,12 @@
     // padding: 10px 15px;
     margin: 10px 0;
   }
+  .map-cad-btn {
+    position: absolute;
+    left: 30%; /* 距离右边 20px */
+    z-index: 2; /* 确保在地图控件之上 */
+    top: @header-height;
+    // padding: 10px 15px;
+    margin: 10px 0;
+  }
 </style>

src/views/system/cadFile/app.ts

@@ -24,15 +24,19 @@ let currentPopup: any = null;
 
 // ===================== 地图初始化部分 =====================
 // 初始化地图
-export const initMap2d = async (container: HTMLElement, config: { fileUrl?: string; style?: vjmap.IMapStyleParam } = {}) => {
+export const initMap2d = async (container: HTMLElement, config: { fileUrl?: string; style?: vjmap.IMapStyleParam; vjId?: string } = {}) => {
   if (!container) {
     message.error('地图容器不存在！');
     throw new Error('地图容器不存在！');
   }
+
   const appStore = useAppStore();
   // const httpDwgUrl = '/resource/test.dwg';
-  const { fileUrl = 'https://vjmap.com/static/assets/data/gym.dwg', style = env.darkTheme ? vjmap.openMapDarkStyle() : vjmap.openMapLightStyle() } =
-    config;
+  const {
+    fileUrl = 'https://vjmap.com/static/assets/data/gym.dwg',
+    style = env.darkTheme ? vjmap.openMapDarkStyle() : vjmap.openMapLightStyle(),
+    vjId,
+  } = config;
 
   container.style.background = 'transparent';
   container.style.width = `${get(container, 'parentElement.clientWidth', 0) / appStore.widthScale}px`;
@@ -41,10 +45,8 @@ export const initMap2d = async (container: HTMLElement, config: { fileUrl?: stri
   svc = new vjmap.Service(env.serviceUrl, env.accessToken);
   if (env.workspace) svc.switchWorkspace(env.workspace);
 
-  style.clipbounds = Math.pow(2, 6);
-
   const res = await svc.openMap({
-    mapid: 'c56c59154345', // 地图ID，上传文件后获得的mapid
+    mapid: vjId || 'c56c59154345', // 地图ID，上传文件后获得的mapid
     version: env.version,
     cbInputPassword: () => {
       return Promise.resolve('hllcad');