[Mod 0000]添加唯杰地图测试代码

package.json

@@ -67,6 +67,8 @@
     "swagger-ui-dist": "^5.30.3",
     "tinymce": "6.6.2",
     "vditor": "^3.11.2",
+    "vjmap": "^1.0.161",
+    "vjmap3d": "^1.0.23",
     "vue": "^3.5.25",
     "vue-cropperjs": "^5.0.0",
     "vue-i18n": "^9.14.5",

public/js/global.js

@@ -306,16 +306,16 @@ const __STATIC_ROUTES__ = [
     children: [
       {
         path: '/manage/map',
-        component: '/demo/table/Basic',
+        component: '/system/cadFile/index',
         meta: {
           keepAlive: true,
           internalOrExternal: false,
           icon: '',
           componentName: 'index',
           title: '地图管理',
-          hideMenu: true,
+          // hideMenu: true,
         },
-        name: 'association',
+        name: 'cadFile',
       },
       {
         path: '/manage/model',

src/App.vue

@@ -9,103 +9,103 @@
 </template>
 
 <script lang="ts" setup>
-  import { watch, ref } from 'vue';
-  import { theme } from 'ant-design-vue';
-  import { ConfigProvider } from 'ant-design-vue';
-  import { AppProvider } from '/@/components/Application';
-  import { useTitle } from '/@/hooks/web/useTitle';
-  import { useLocale } from '/@/locales/useLocale';
-  import { useAppStore } from '/@/store/modules/app';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { ThemeEnum } from '/@/enums/appEnum';
-  import { changeTheme } from '/@/logics/theme/index';
-  import AdaptiveContainer from '/@/components/Container/src/AdaptiveContainer.vue';
+import { watch, ref } from 'vue';
+import { theme } from 'ant-design-vue';
+import { ConfigProvider } from 'ant-design-vue';
+import { AppProvider } from '/@/components/Application';
+import { useTitle } from '/@/hooks/web/useTitle';
+import { useLocale } from '/@/locales/useLocale';
+import { useAppStore } from '/@/store/modules/app';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { changeTheme } from '/@/logics/theme/index';
+import AdaptiveContainer from '/@/components/Container/src/AdaptiveContainer.vue';
 
-  const appStore = useAppStore();
-  // 解决日期时间国际化问题
-  import 'dayjs/locale/zh-cn';
-  // support Multi-language
-  const { getAntdLocale } = useLocale();
+const appStore = useAppStore();
+// 解决日期时间国际化问题
+import 'dayjs/locale/zh-cn';
+// support Multi-language
+const { getAntdLocale } = useLocale();
 
-  const adaptiveOptions = ref({});
+const adaptiveOptions = ref({});
 
-  useTitle();
-  /**
-   * 2024-04-07
-   * liaozhiyang
-   * 暗黑模式下默认文字白色，白天模式默认文字 #333
-   * */
-  const modeAction = (data) => {
-    if (data.token) {
-      if (getDarkMode.value === ThemeEnum.DARK) {
-        Object.assign(data.token, { colorTextBase: 'fff' });
-      } else {
-        Object.assign(data.token, { colorTextBase: '#333' });
-      }
+useTitle();
+/**
+ * 2024-04-07
+ * liaozhiyang
+ * 暗黑模式下默认文字白色，白天模式默认文字 #333
+ * */
+const modeAction = (data) => {
+  if (data.token) {
+    if (getDarkMode.value === ThemeEnum.DARK) {
+      Object.assign(data.token, { colorTextBase: 'fff' });
+    } else {
+      Object.assign(data.token, { colorTextBase: '#333' });
+    }
 
-      // 定义主题色 css 变量
-      if (data.token.colorPrimary) {
-        document.documentElement.style.setProperty('--j-global-primary-color', data.token.colorPrimary);
-      }
+    // 定义主题色 css 变量
+    if (data.token.colorPrimary) {
+      document.documentElement.style.setProperty('--j-global-primary-color', data.token.colorPrimary);
+    }
+  }
+};
+// 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+const appTheme: any = ref({});
+const { getDarkMode } = useRootSetting();
+watch(
+  () => getDarkMode.value,
+  (newValue) => {
+    delete appTheme.value.algorithm;
+    if (newValue === ThemeEnum.DARK) {
+      appTheme.value.algorithm = theme.darkAlgorithm;
     }
-  };
-  // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
-  const appTheme: any = ref({});
-  const { getDarkMode } = useRootSetting();
-  watch(
-    () => getDarkMode.value,
-    (newValue) => {
-      delete appTheme.value.algorithm;
-      if (newValue === ThemeEnum.DARK) {
-        appTheme.value.algorithm = theme.darkAlgorithm;
-      }
-      // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
-      if (import.meta.env.PROD) {
-        changeTheme(appStore.getProjectConfig.themeColor);
-      }
-      modeAction(appTheme.value);
-      appTheme.value = {
-        ...appTheme.value,
-      };
-    },
-    { immediate: true }
-  );
-  watch(
-    appStore.getProjectConfig,
-    (newValue) => {
-      const primary = newValue.themeColor;
-      const result = {
-        ...appTheme.value,
-        ...{
-          token: {
-            colorPrimary: primary,
-            wireframe: true,
-            fontSize: 14,
-            colorTextBase: '#333',
-            colorSuccess: '#55D187',
-            colorInfo: primary,
-            borderRadius: 4,
-            sizeStep: 4,
-            sizeUnit: 4,
-            colorWarning: '#EFBD47',
-            colorError: '#ED6F6F',
-            fontFamily:
-              '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
-          },
+    // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
+    if (import.meta.env.PROD) {
+      changeTheme(appStore.getProjectConfig.themeColor);
+    }
+    modeAction(appTheme.value);
+    appTheme.value = {
+      ...appTheme.value,
+    };
+  },
+  { immediate: true }
+);
+watch(
+  appStore.getProjectConfig,
+  (newValue) => {
+    const primary = newValue.themeColor;
+    const result = {
+      ...appTheme.value,
+      ...{
+        token: {
+          colorPrimary: primary,
+          wireframe: true,
+          fontSize: 14,
+          colorTextBase: '#333',
+          colorSuccess: '#55D187',
+          colorInfo: primary,
+          borderRadius: 4,
+          sizeStep: 4,
+          sizeUnit: 4,
+          colorWarning: '#EFBD47',
+          colorError: '#ED6F6F',
+          fontFamily:
+            '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
         },
-      };
-      appTheme.value = result;
-      modeAction(result);
-    },
-    { immediate: true }
-  );
-  setTimeout(() => {
-    appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
-  }, 300);
+      },
+    };
+    appTheme.value = result;
+    modeAction(result);
+  },
+  { immediate: true }
+);
+setTimeout(() => {
+  appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
+}, 300);
 </script>
 <style lang="less">
-  // 代码逻辑说明: 【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
-  img {
-    display: inline-block;
-  }
+// 代码逻辑说明: 【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
+img {
+  display: inline-block;
+}
 </style>

src/views/system/cadFile/app.ts

@@ -0,0 +1,87 @@
+import vjmap, { Map } from 'vjmap';
+import { env } from './env';
+import { App, MapThreeLayer } from 'vjmap3d';
+import 'vjmap/dist/vjmap.min.css';
+import { useAppStore } from '/@/store/modules/app';
+
+const createMapApp = async () => {
+  const appStore = useAppStore();
+  const containerId = 'map3dContainer';
+  // @ts-ignore
+  const containerDiv = document.getElementById(containerId);
+  //   document.getElementById(containerId).style.background = env.background || (env.darkTheme ? '#2c3e50' : 'rgb(200, 211, 220)');
+  containerDiv.style.background = 'transparent';
+  //   debugger;
+  containerDiv.style.width = containerDiv?.parentElement?.clientWidth / appStore.widthScale + 'px';
+  containerDiv.style.height = containerDiv?.parentElement?.clientHeight / appStore.heightScale + 'px';
+
+  const svc = new vjmap.Service(env.serviceUrl, env.accessToken);
+  if (env.workspace) {
+    // 如果有工作区，切换至相对应的工作区
+    svc.switchWorkspace(env.workspace);
+  }
+  // 打开地图
+  const style = env.darkTheme ? vjmap.openMapDarkStyle() : vjmap.openMapLightStyle();
+  style.clipbounds = Math.pow(2, 6); // 只传值，不传范围，表示之前的范围放大多少倍
+  //   const httpDwgUrl = 'https://vjmap.com/static/assets/data/gym.dwg'; // 长传到服务器上的dwg文件
+  const httpDwgUrl = './test.dwg';
+  const res = await svc.openMap({
+    // mapid: env.mapId, // 地图ID，上传文件后获得的mapid
+    version: env.version,
+    fileid: httpDwgUrl, // 使用文件地址
+    // @ts-ignore
+    mapopenway: env.mapopenway || vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
+    style,
+  });
+  if (res.error) {
+    // 如果打开出错
+    console.error(res.error);
+  }
+  // 获取地图范围
+  const mapExtent = vjmap.GeoBounds.fromString(res.bounds);
+  // 根据地图范围建立几何投影坐标系
+  const prj = new vjmap.GeoProjection(mapExtent);
+
+  // 地图对象
+  const map = new vjmap.Map({
+    container: containerId, // DIV容器ID
+    style: svc.rasterStyle(), // 样式，这里是栅格样式
+    center: prj.toLngLat(mapExtent.center()), // 设置地图中心点
+    zoom: 7, // 设置地图缩放级别
+    pitch: 0,
+    antialias: true, // 反锯齿
+    renderWorldCopies: false, // 不显示多屏地图
+  });
+
+  // 关联服务对象和投影对象
+  //   map.attach(svc, prj);
+  await map.onLoad();
+
+  // 创建3d图层
+  const mapLayer = new MapThreeLayer(map, {
+    stat: {
+      show: false,
+      left: '0',
+    },
+    scene: {
+      showAxesHelper: false,
+      axesHelperSize: 1,
+      defaultLights: false,
+      gridHelper: {
+        visible: env.gridHelper ?? true,
+        args: [1000, 1000],
+        cellSize: 10,
+        sectionSize: 100,
+      },
+    },
+  });
+  const app: App = mapLayer.app;
+  map.addLayer(new vjmap.ThreeLayer({ context: mapLayer as any }));
+
+  map.doubleClickZoom.disable(); // 禁止双击缩放
+  return app;
+};
+export const initMap2d = async () => {
+  const app = await createMapApp();
+  return app;
+};

src/views/system/cadFile/env.ts

@@ -0,0 +1,19 @@
+export const env = {
+  serviceUrl: 'https://vjmap.com/server/api/v1',
+  accessToken:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjo0ODEzMjY3NjM3LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTY1OTY2NjYzN30.cDXCH2ElTzU2sQU36SNHWoTYTAc4wEkVIXmBAIzWh6M',
+  mapId: 'sys_cad3d',
+  version: '',
+  workspace: '',
+  darkTheme: false,
+  background: '',
+  gridHelper: true,
+  showMousePositionControl: true,
+  showBaseMap: true,
+  showVertexColors: false,
+  showWireframe: false,
+  mapopenway: 'GeomRender',
+  dataId: '',
+  scaleZ: 1,
+  baseZ: 1,
+};

src/views/system/cadFile/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="map3dContainer"></div>
+</template>
+
+<script lang="ts" name="cad-file" setup>
+//ts语法
+import { nextTick, onMounted } from 'vue';
+import { initMap2d } from './app';
+
+
+onMounted(() => {
+  nextTick(() => {
+    initMap2d();
+  });
+})
+
+</script>
+
+<style scoped>
+#map3dContainer {
+  position: absolute;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+</style>