地图基础配置

2025-05-22 13:56:20 +08:00 · 2025-05-22 13:56:20 +08:00 · fb6f34f649
parent 8b2680884e
commit fb6f34f649
8 changed files with 437 additions and 3 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "@vueup/vue-quill": "1.2.0",
    "@vueuse/core": "10.11.0",
    "axios": "0.28.1",
+    "cesium": "^1.129.0",
    "clipboard": "2.0.11",
    "echarts": "5.5.1",
    "element-plus": "2.7.6",
@ -24,6 +25,7 @@
    "js-beautify": "1.14.11",
    "js-cookie": "3.0.5",
    "jsencrypt": "3.3.2",
+    "json-editor-vue": "^0.18.1",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
    "splitpanes": "3.1.5",
@ -38,6 +40,7 @@
    "unplugin-auto-import": "0.17.6",
    "unplugin-vue-setup-extend-plus": "1.0.1",
    "vite": "5.3.2",
+    "vite-plugin-cesium": "^1.2.23",
    "vite-plugin-compression": "0.5.1",
    "vite-plugin-svg-icons": "2.0.1"
  }
--- a/src/components/CesiumMap/index.vue
+++ b/src/components/CesiumMap/index.vue
@ -0,0 +1,189 @@
+<template>
+  <div id="map-container" class="map-container">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import * as Cesium from 'cesium';
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+let viewer = null;
+
+
+onMounted(async () => {
+  initMap();
+})
+
+// 初始化地图
+const initMap = async () => {
+ let terrainProvider = await Cesium.createWorldTerrainAsync()
+  const oldOptions = {
+    // 动画仪表盘
+    animation: false,
+    // 基础图层选择按钮
+    baseLayerPicker: false,
+    // 全屏按钮
+    fullscreenButton: false,
+    vrButton: false,
+    // 地名地址查询框
+    geocoder: false,
+    // 返回地球视角按钮
+    homeButton: false,
+    // 属性框（显示拾取要素的属性）
+    infoBox: false,
+    // 场景模式切换按钮（三维地球、2.5维场景、二维地图）
+    sceneModePicker: false,
+    // 拾取要素识别（显示个框，但不明确选中内容）？？？
+    selectionIndicator: false,
+    // 时间轴
+    timeline: false,
+    // 操作提示按钮
+    navigationHelpButton: false,
+    // 超采样开4倍，如果显示困难再降低
+    msaaSamples: 2,
+    scene3DOnly: true,
+    shouldAnimate: true,
+    contextOptions: {
+      webgl: {
+        // 允许截图
+        preserveDrawingBuffer: true,
+      },
+    },
+  }
+  // 添加cesium的token（目前使用zq发布的）
+  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZjljMTU0MC03OGY5LTRjMzQtYWJkYS02MzI2OTI2OGUyNTgiLCJpZCI6MzE3NTgsImlhdCI6MTc0MTA1MjY3OH0.uvbT5jSUFS-wU41MvzAuY33yfYnUiOWQCWad2KSX28o'
+  console.log(props.options.configJson)
+  let configJson = props.options.configJson;
+  try {
+    configJson = JSON.parse(configJson)
+  } catch (e) {
+    configJson = {}
+  }
+  if (props.options.isTerrainProvider) {
+    oldOptions.terrainProvider = terrainProvider;
+  }
+  let options = Object.assign(oldOptions, configJson)
+  viewer = new Cesium.Viewer('map-container', options)
+
+  // 启用深度测试
+  // viewer.scene.globe.depthTestAgainstTerrain = true;
+  // 隐藏logo
+  viewer.cesiumWidget.creditContainer.style.display = 'none'
+
+  setInitConfig();
+
+  // 取消左键双击
+  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+}
+
+// 设置初始值
+const setInitConfig = () => {
+  let options = props.options;
+  mapSetView(options);
+  // 地形夸张
+  if (options.terrainExaggeration) {
+    viewer.scene.globe.terrainExaggeration = options.terrainExaggeration;
+  }
+
+  setMapImg(options);
+}
+
+// 设置地图
+const setMapImg = (options) => {
+  if (!options.ditu) {
+    return;
+  }
+
+  if (options.ditu === 'amap') {
+    const gaodeVector = new Cesium.UrlTemplateImageryProvider({
+      url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+      name: "高德矢量地图",
+    });
+    viewer.imageryLayers.addImageryProvider(gaodeVector);
+  } else if (options.ditu === 'tencent') {
+    const tencentVector = new Cesium.UrlTemplateImageryProvider({
+      url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297",
+      customTags: {
+        sx: function (imageryProvider, x, y, level) {
+          return x >> 4;
+        },
+        sy: function (imageryProvider, x, y, level) {
+          return ((1 << level) - y) >> 4;
+        },
+      },
+      name: "腾讯矢量地图",
+    });
+    viewer.imageryLayers.addImageryProvider(tencentVector);
+  } else if (options.ditu === 'baidu') {
+    const baiduVector = new CustomBaiduImageryProvider({
+      url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
+    });
+    viewer.imageryLayers.addImageryProvider(baiduVector);
+  } else if (options.ditu === 'tianditu') {
+    const tiandituImage = new Cesium.WebMapTileServiceImageryProvider({
+      url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=25129831bd91c81af49d3ecf578f6b3c",
+      layer: "img",
+      style: "default",
+      format: "tiles",
+      tileMatrixSetID: "w",
+      maximumLevel: 18,
+      credit: new Cesium.Credit("© Tianditu", "http://www.tianditu.gov.cn/"),
+      name: "天地图影像地图",
+    });
+    viewer.imageryLayers.addImageryProvider(tiandituImage);
+  }
+}
+
+// 地图设置视角
+const mapSetView = (options) => {
+  let destination = Cesium.Cartesian3.fromDegrees(options.setView.x, options.setView.y, options.setView.z);
+  let orientation = {
+    heading: Cesium.Math.toRadians(options.setView.heading),
+    pitch: Cesium.Math.toRadians(options.setView.pitch),
+    roll: Cesium.Math.toRadians(options.setView.roll)
+  }
+
+  if (options.setView.duration === '默认') {
+    viewer.camera.flyTo({
+      destination,
+      orientation
+    })
+  } else {
+    viewer.camera.flyTo({
+      destination,
+      orientation,
+      duration: options.setView.duration
+    })
+  }
+}
+
+onUnmounted(() => {
+  if (viewer) {
+    viewer.entities.removeAll()
+    viewer.imageryLayers.removeAll()
+    for (let index = 0; index < viewer.dataSources.length; index++) {
+      const datasource = viewer.dataSources.get(index);
+      datasource.entities.removeAll()
+    }
+    viewer.dataSources.removeAll(true)
+    // viewer.scene.primitives.removeAll();
+    viewer.destroy()
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -31,13 +31,16 @@ import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
+import { constantRoutes } from "@/router"

 const route = useRoute();
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()

-const sidebarRouters = computed(() => permissionStore.sidebarRouters);
+// todo 重构菜单数据来源
+// const sidebarRouters = computed(() => permissionStore.sidebarRouters);
+const sidebarRouters = constantRoutes;
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
--- a/src/main.js
+++ b/src/main.js
@ -23,7 +23,7 @@ import 'virtual:svg-icons-register'
 import SvgIcon from '@/components/SvgIcon'
 import elementIcons from '@/components/SvgIcon/svgicon'

-import './permission' // permission control
+// import './permission' // permission control

 import { useDict } from '@/utils/dict'
 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
--- a/src/router/index.js
+++ b/src/router/index.js
@ -83,6 +83,24 @@ export const constantRoutes = [
        meta: { title: '个人中心', icon: 'user' }
      }
    ]
+  },
+  {
+    path: '/gisManagement',
+    component: Layout,
+    alwaysShow: true,
+    name: 'gisManagement',
+    redirect: '/gisManagement/configSetting',
+    meta: {
+      title: 'GIS管理'
+    },
+    children: [
+      {
+        path: 'configSetting',
+        component: () => import('@/views/gisManagement/configSetting/index.vue'),
+        name: 'configSetting',
+        meta: { title: '地图配置' }
+      }
+    ]
  }
 ]

--- a/src/views/gisManagement/configSetting/components/previewMap.vue
+++ b/src/views/gisManagement/configSetting/components/previewMap.vue
@ -0,0 +1,45 @@
+<template>
+  <div class="preview-map">
+    <cesium-map :options="options">
+      <el-button class="btn" @click="backClick">返回</el-button>
+    </cesium-map>
+  </div>
+</template>
+
+<script setup>
+import CesiumMap from '@/components/CesiumMap/index.vue';
+
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+
+const emits = defineEmits(['back'])
+
+const backClick = () => {
+  emits('back');
+}
+
+</script>
+
+<style lang="scss" scoped>
+.preview-map {
+  z-index: 2;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  bottom: 10px;
+  right: 10px;
+  background: #fff;
+  .btn {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 4;
+  }
+}
+</style>
--- a/src/views/gisManagement/configSetting/index.vue
+++ b/src/views/gisManagement/configSetting/index.vue
@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+    <el-card class="configSetting">
+      <template #header>
+        <div class="card-header">
+          <span class="name">地图配置</span>
+          <el-link type="primary" v-if="!isEdite" @click="isEdite = true">编辑</el-link>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="card-footer">
+          <el-button type="success" @click="showMap = true">预览</el-button>
+          <el-button type="primary" @click="saveClick" v-if="isEdite">保存</el-button>
+        </div>
+      </template>
+
+      <el-form :model="formData" label-width="100px" :disabled="!isEdite">
+        <el-divider content-position="left">视角配置</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="x轴" prop="setView.x">
+              <el-input v-model.number="formData.setView.x" placeholder="请输入x轴"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="y轴" prop="setView.y">
+              <el-input v-model.number="formData.setView.y" placeholder="请输入y轴"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="z轴" prop="setView.z">
+              <el-input v-model.number="formData.setView.z" placeholder="请输入z轴"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="视角转换时间" prop="setView.duration">
+              <el-input v-model="formData.setView.duration" placeholder="请输入视角转换时间"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="偏航角" prop="setView.heading">
+              <el-input v-model.number="formData.setView.heading" placeholder="请输入偏航角"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="俯仰角" prop="setView.pitch">
+              <el-input v-model.number="formData.setView.pitch" placeholder="请输入俯仰角"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="翻滚角" prop="setView.roll">
+              <el-input v-model.number="formData.setView.roll" placeholder="请输入翻滚角"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">地形配置</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="是否显示地形" prop="isTerrainProvider">
+              <el-switch v-model="formData.isTerrainProvider" active-text="是" inactive-text="否"></el-switch>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="自定义地形" prop="cesiumTerrainProviderUrl">
+              <el-input v-model="formData.cesiumTerrainProviderUrl" placeholder="请输入自定义地形地址(没有则无需输入)"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="地形夸张" prop="terrainExaggeration">
+              <el-slider v-model="formData.terrainExaggeration" :max="10" :min="0"></el-slider>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+
+        <el-divider content-position="left">底图配置</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="底图" prop="ditu">
+              <el-select v-model="formData.ditu">
+                <el-option v-for="opt in dituList" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-divider content-position="left">其他配置</el-divider>
+        <el-form-item label="其他配置" prop="configJson">
+          <JsonEditorVue v-model="formData.configJson" style="width: 100%;" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <preview-map v-if="showMap" :options="formData" @back="showMap = false"></preview-map>
+  </div>
+</template>
+
+<script setup name="configSetting">
+import JsonEditorVue from 'json-editor-vue';
+import PreviewMap from './components/previewMap.vue';
+
+const isEdite = ref(false);
+const showMap = ref(false);
+
+const dituList = [
+  {
+    label: '百度地图',
+    value: 'baidu'
+  },
+  {
+    label: '高德地图',
+    value: 'amap'
+  },
+  {
+    label: '腾讯地图',
+    value: 'tencent'
+  },
+  {
+    label: '天地图',
+    value: 'tianditu'
+  }
+]
+
+const formData = ref({
+  setView: {
+    duration: '默认',
+    x: 102.5,
+    y: 25.0,
+    z: 100000,
+    heading: 90, // 偏航角
+    pitch: -90, // 俯仰角
+    roll: 0 // 翻滚角
+  },
+
+  terrainExaggeration: 1, // 地形夸张
+  isTerrainProvider: true, // 是否显示地形
+  cesiumTerrainProviderUrl: '', // 自定义地形
+  ditu: '', // 底图选择
+  configJson: {}
+})
+
+// 点击保存
+const saveClick = () => {
+  // todo 调保存接口
+  isEdite.value = false;
+}
+
+onMounted(() => {
+  // todo 调初始化接口，取到初始配置的数据
+})
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  position: relative;
+  height: calc(100vh - 84px);
+  overflow: hidden;
+}
+.configSetting {
+  height: 100%;
+  overflow: auto;
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .card-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
--- a/vite/plugins/index.js
+++ b/vite/plugins/index.js
@ -1,4 +1,5 @@
 import vue from '@vitejs/plugin-vue'
+import cesium from 'vite-plugin-cesium'

 import createAutoImport from './auto-import'
 import createSvgIcon from './svg-icon'
@ -6,7 +7,7 @@ import createCompression from './compression'
 import createSetupExtend from './setup-extend'

 export default function createVitePlugins(viteEnv, isBuild = false) {
-    const vitePlugins = [vue()]
+    const vitePlugins = [vue(), cesium()]
    vitePlugins.push(createAutoImport())
 	vitePlugins.push(createSetupExtend())
    vitePlugins.push(createSvgIcon(isBuild))