huzhengkao
/
tcctyn-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: huzhengkao:26463f6bdfdbfb8af53bda96f82cc0734110b56c
Branches Tags
huzhengkao:master
..
compare: huzhengkao:96198d25af4182028aa8ce533829b4aabde52e96
Branches Tags
huzhengkao:master

No commits in common. "26463f6bdfdbfb8af53bda96f82cc0734110b56c" and "96198d25af4182028aa8ce533829b4aabde52e96" have entirely different histories.
26463f6bdf ... 96198d25af

8 changed files with 3 additions and 437 deletions
Show Stats Expand all files Collapse all files

3
package.json
View File

@ -16,7 +16,6 @@
"@vueup/vue-quill": "1.2.0", "@vueup/vue-quill": "1.2.0",
"@vueuse/core": "10.11.0", "@vueuse/core": "10.11.0",
"axios": "0.28.1", "axios": "0.28.1",
"cesium": "^1.129.0",
"clipboard": "2.0.11", "clipboard": "2.0.11",
"echarts": "5.5.1", "echarts": "5.5.1",
"element-plus": "2.7.6", "element-plus": "2.7.6",
@ -25,7 +24,6 @@
"js-beautify": "1.14.11", "js-beautify": "1.14.11",
"js-cookie": "3.0.5", "js-cookie": "3.0.5",
"jsencrypt": "3.3.2", "jsencrypt": "3.3.2",
"json-editor-vue": "^0.18.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.1.7", "pinia": "2.1.7",
"splitpanes": "3.1.5", "splitpanes": "3.1.5",
@ -40,7 +38,6 @@
"unplugin-auto-import": "0.17.6", "unplugin-auto-import": "0.17.6",
"unplugin-vue-setup-extend-plus": "1.0.1", "unplugin-vue-setup-extend-plus": "1.0.1",
"vite": "5.3.2", "vite": "5.3.2",
"vite-plugin-cesium": "^1.2.23",
"vite-plugin-compression": "0.5.1", "vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "2.0.1" "vite-plugin-svg-icons": "2.0.1"
} }

189
src/components/CesiumMap/index.vue
View File

@ -1,189 +0,0 @@
<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>

5
src/layout/components/Sidebar/index.vue
View File

@ -31,16 +31,13 @@ import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app' import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings' import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission' import usePermissionStore from '@/store/modules/permission'
import { constantRoutes } from "@/router"
const route = useRoute(); const route = useRoute();
const appStore = useAppStore() const appStore = useAppStore()
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore() const permissionStore = usePermissionStore()
// todo 重构菜单数据来源 const sidebarRouters = computed(() => permissionStore.sidebarRouters);
// const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const sidebarRouters = constantRoutes;
const showLogo = computed(() => settingsStore.sidebarLogo); const showLogo = computed(() => settingsStore.sidebarLogo);
const sideTheme = computed(() => settingsStore.sideTheme); const sideTheme = computed(() => settingsStore.sideTheme);
const theme = computed(() => settingsStore.theme); const theme = computed(() => settingsStore.theme);

2
src/main.js
View File

@ -23,7 +23,7 @@ import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon' import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon' import elementIcons from '@/components/SvgIcon/svgicon'
// import './permission' // permission control import './permission' // permission control
import { useDict } from '@/utils/dict' import { useDict } from '@/utils/dict'
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi' import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'

18
src/router/index.js
View File

@ -83,24 +83,6 @@ export const constantRoutes = [
meta: { title: '个人中心', icon: 'user' } 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: '地图配置' }
}
]
} }
] ]

45
src/views/gisManagement/configSetting/components/previewMap.vue
View File

@ -1,45 +0,0 @@
<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>

175
src/views/gisManagement/configSetting/index.vue
View File

@ -1,175 +0,0 @@
<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>

3
vite/plugins/index.js
View File

@ -1,5 +1,4 @@
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
import createAutoImport from './auto-import' import createAutoImport from './auto-import'
import createSvgIcon from './svg-icon' import createSvgIcon from './svg-icon'
@ -7,7 +6,7 @@ import createCompression from './compression'
import createSetupExtend from './setup-extend' import createSetupExtend from './setup-extend'
export default function createVitePlugins(viteEnv, isBuild = false) { export default function createVitePlugins(viteEnv, isBuild = false) {
const vitePlugins = [vue(), cesium()] const vitePlugins = [vue()]
vitePlugins.push(createAutoImport()) vitePlugins.push(createAutoImport())
vitePlugins.push(createSetupExtend()) vitePlugins.push(createSetupExtend())
vitePlugins.push(createSvgIcon(isBuild)) vitePlugins.push(createSvgIcon(isBuild))