Skip to content

B
basic-vue-admin
提交 20997b13 作者: 方治民
操作

合并分支 'examples' 到 'beta' 

Examples

查看合并请求 !7
上级 4c545345 2a3c0896
流水线 #122 已失败 于阶段
in 1 分 11 秒
正在显示 包含 847 行增加 和 53 行删除
.env.development
......@@ -14,7 +14,7 @@ VITE_DROP_CONSOLE = false
# Basic interface address SPA
VITE_GLOB_API_URL=/basic-api
# VITE_GLOB_API_URL=http://localhost:8181
# VITE_GLOB_API_URL=http://192.168.0.156:8081
# Interface prefix
VITE_GLOB_API_URL_PREFIX=
......
.eslintrc.js
......@@ -68,5 +68,6 @@ module.exports = {
},
],
'vue/multi-word-component-names': 'off',
'vue/no-reserved-component-names': 'off',
},
}
README.md
......@@ -14,6 +14,7 @@
<!-- prettier-ignore -->
- [开发规范说明](./doc/workflow.md)
- [技术栈说明](./doc/technique.md)
- 💡 [实用技巧](./doc/skill.md)
---
......@@ -27,17 +28,28 @@
- [ ] 适配上传/下载接口的自动化生成模板
- [ ] 新增 Demo 模块，集成基础 Table 和 Form 组件示例，上传下载等
## 前后端联调（可选，默认以 Mock 方式运行）
---
### API 联调
```diff
# 修改 .env.development 变量, 将 API 接口从 Mock 切换到开发环境
- VITE_GLOB_API_URL=/basic-api
- VITE_GLOB_API_URL_PREFIX=
+ VITE_GLOB_API_URL=http://localhost:8181
# IP 地址和 API 前缀根据实际情况修改
+ VITE_GLOB_API_URL=http://192.168.0.156:8081
+ VITE_GLOB_API_URL_PREFIX=/api
```
### Route 模式切换
```diff
# 修改 projectSetting.ts 项目全局配置
# 例如: 修改权限模式，将前端菜单权限改为根据后台接口获取的权限
- permissionMode: PermissionModeEnum.ROUTE_MAPPING,
+ permissionMode: PermissionModeEnum.BACK,
```
build/vite/plugin/index.ts
......@@ -16,6 +16,7 @@ import { configThemePlugin } from './theme'
import { configSvgIconsPlugin } from './svgSprite'
import { configOptimizePlugin } from './optimize'
import { configAutoImportPlugin } from './autoImport'
import { configMarsCesiumPlugin } from './mars'
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
const { VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
......@@ -65,6 +66,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
// vite-plugin-auto-import
vitePlugins.push(configAutoImportPlugin())
// mars3d
vitePlugins.push(configMarsCesiumPlugin())
// The following plugins only work in the production environment
if (isBuild) {
// vite-plugin-imagemin
......
build/vite/plugin/mars.ts 0 → 100644
/**
* CesiumJS
* https://github.com/nshen/vite-plugin-cesium
*/
import marsCesium from 'vite-plugin-mars3d'
export function configMarsCesiumPlugin() {
return marsCesium()
}
doc/skill.md 0 → 100644
## 实用技巧
### IDE
<!-- prettier-ignore -->
1. 配置 `**触发建议**` 快捷键提升编码效率（例如: Ctrl + /）
### Code
<!-- prettier-ignore -->
1. 在路由 `meta` 属性中配置 `hideLayout` 可隐藏当前路由对应的布局，凸显页面内容
2. 在路由参数中增加 `__full__` 可设置当前路由为全屏模式，全屏模式下页面布局不显示
package.json
......@@ -34,6 +34,7 @@
"log": "conventional-changelog -p angular -i CHANGELOG.md -s",
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
"clean:lib": "rimraf node_modules",
"lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
......@@ -54,35 +55,39 @@
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-vue": "^6.1.0",
"@iconify/iconify": "^2.2.1",
"@logicflow/core": "^1.1.15",
"@logicflow/extension": "^1.1.15",
"@vue/runtime-core": "^3.2.33",
"@vue/shared": "^3.2.33",
"@vueuse/core": "^8.4.2",
"@vueuse/shared": "^8.4.2",
"@logicflow/core": "^1.1.20",
"@logicflow/extension": "^1.1.20",
"@turf/turf": "^6.5.0",
"@vue/runtime-core": "^3.2.37",
"@vue/shared": "^3.2.37",
"@vueuse/core": "^8.6.0",
"@vueuse/shared": "^8.6.0",
"@zxcvbn-ts/core": "^2.0.1",
"ant-design-vue": "^3.2.3",
"ant-design-vue": "^3.2.6",
"axios": "^0.26.1",
"codemirror": "^5.65.3",
"codemirror": "^5.65.5",
"cropperjs": "^1.5.12",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.2",
"dayjs": "^1.11.3",
"echarts": "^5.3.2",
"intro.js": "^5.1.0",
"lodash-es": "^4.17.21",
"mars3d": "file:packages/mars3d",
"mars3d-cesium": "^1.94.0",
"mockjs": "^1.1.0",
"nanoid": "^4.0.0",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.2.1",
"pinia": "^2.0.14",
"print-js": "^1.6.0",
"qrcode": "^1.5.0",
"qs": "^6.10.3",
"qs": "^6.10.5",
"resize-observer-polyfill": "^1.5.1",
"showdown": "^2.1.0",
"sortablejs": "^1.15.0",
"tinymce": "^5.10.4",
"vditor": "^3.8.14",
"vue": "^3.2.33",
"tinymce": "^5.10.5",
"vditor": "^3.8.15",
"vue": "^3.2.37",
"vue-i18n": "^9.1.10",
"vue-json-pretty": "^2.1.0",
"vue-router": "^4.0.15",
......@@ -90,9 +95,9 @@
"xlsx": "^0.18.5"
},
"devDependencies": {
"@commitlint/cli": "^16.2.4",
"@commitlint/config-conventional": "^16.2.4",
"@iconify/json": "^2.1.43",
"@commitlint/cli": "^17.0.2",
"@commitlint/config-conventional": "^17.0.2",
"@iconify/json": "^2.1.58",
"@purge-icons/generated": "^0.8.1",
"@types/codemirror": "^5.60.5",
"@types/crypto-js": "^4.1.1",
......@@ -101,59 +106,60 @@
"@types/intro.js": "^3.0.2",
"@types/lodash-es": "^4.17.6",
"@types/mockjs": "^1.0.6",
"@types/node": "^17.0.33",
"@types/node": "^17.0.41",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2",
"@types/qs": "^6.9.7",
"@types/showdown": "^1.9.4",
"@types/sortablejs": "^1.13.0",
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.23.0",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"@vitejs/plugin-legacy": "^1.8.2",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/compiler-sfc": "3.2.31",
"@vue/test-utils": "^2.0.0-rc.21",
"@vue/test-utils": "^2.0.0",
"autoprefixer": "^10.4.7",
"commitizen": "^4.2.4",
"conventional-changelog-cli": "^2.2.2",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
"dotenv": "^16.0.1",
"eslint": "^8.15.0",
"eslint": "^8.17.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.7.1",
"eslint-plugin-vue": "^9.1.0",
"esno": "^0.14.1",
"fs-extra": "^10.1.0",
"husky": "^7.0.4",
"inquirer": "^8.2.4",
"less": "^4.1.2",
"less": "^4.1.3",
"lint-staged": "12.3.7",
"npm-run-all": "^4.1.5",
"picocolors": "^1.0.0",
"pont-engine": "^1.3.1",
"postcss": "^8.4.13",
"postcss": "^8.4.14",
"postcss-html": "^1.4.1",
"postcss-less": "^6.0.0",
"prettier": "^2.6.2",
"rimraf": "^3.0.2",
"rollup": "^2.73.0",
"rollup": "^2.75.6",
"rollup-plugin-visualizer": "^5.6.0",
"sort-package-json": "^1.57.0",
"stylelint": "^14.8.2",
"stylelint": "^14.9.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^7.0.0",
"stylelint-config-recommended": "^8.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0",
"stylelint-config-standard": "^26.0.0",
"stylelint-order": "^5.0.0",
"ts-node": "^10.7.0",
"typescript": "^4.6.4",
"unplugin-auto-import": "^0.7.1",
"vite": "^2.9.9",
"ts-node": "^10.8.1",
"typescript": "^4.7.3",
"unplugin-auto-import": "^0.7.2",
"vite": "^2.9.10",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-mkcert": "^1.6.0",
"vite-plugin-mars3d": "^1.1.4",
"vite-plugin-mkcert": "^1.7.1",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-optimize-persist": "^0.1.2",
"vite-plugin-package-config": "^0.1.1",
......@@ -164,8 +170,8 @@
"vite-plugin-theme": "^0.8.6",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.8.4",
"vue-eslint-parser": "^9.0.1",
"vue-tsc": "^0.34.13"
"vue-eslint-parser": "^9.0.2",
"vue-tsc": "^0.37.3"
},
"engines": {
"node": "^12 || >=14"
......
packages/mars3d/README.md 0 → 100644
<p align="center">
<img src="https://muyao1987.gitee.io/cdn/mars3d.cn/logo.png" width="300px" />
</p>
<p align="center">🌎 一款基于WebGL技术实现的三维地球客户端开发平台</p>
<p align="center">
<a target="_black" href="https://www.npmjs.com/package/mars3d">
<img alt="Npm version" src="https://img.shields.io/npm/v/mars3d.svg?style=flat&logo=npm&label=version"/>
</a>
<a target="_black" href="https://www.npmjs.com/package/mars3d">
<img alt="Npm downloads" src="https://img.shields.io/npm/dt/mars3d?style=flat&logo=npm">
</a>
<a target="_black" href="https://github.com/marsgis/mars3d">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/marsgis/mars3d?style=flat&logo=github">
</a>
<a href='https://gitee.com/marsgis/mars3d/stargazers'><img src='https://gitee.com/marsgis/mars3d/badge/star.svg?theme=dark' alt='star'></img></a>
</p>
[**English**](./README_EN.md) |[**中文**](./README.md)
当前仓库包含 SDK 更新日志、和其他仓库导航。
Github：[https://github.com/marsgis/mars3d](https://github.com/marsgis/mars3d)
国内 Gitee：[https://gitee.com/marsgis/mars3d](https://gitee.com/marsgis/mars3d)
## 功能示例
对平台每个功能编写的案例代码，可以阅读每个示例代码来学习各功能，与官网功能示例一致效果。
| 说明 | 教程 | 视频 | Github 源码 | 国内 Gitee 源码 |
| --- | --- | --- | --- | --- |
| 原生 JS 版 | [查看](http://mars3d.cn/dev/guide/project/example-es5.html) | [查看](https://www.bilibili.com/video/BV1Hg411o7Js/) | [mars3d-es5-example](https://github.com/marsgis/mars3d-es5-example) | [mars3d-es5-example](https://gitee.com/marsgis/mars3d-es5-example) |
| Vue 版 | [查看](http://mars3d.cn/dev/guide/project/example-vue.html) | [查看](https://www.bilibili.com/video/BV1PL41177SS/) | [mars3d-vue-example](https://github.com/marsgis/mars3d-vue-example) | [mars3d-vue-example](https://gitee.com/marsgis/mars3d-vue-example) |
| React 版 | [查看](http://mars3d.cn/dev/guide/project/example-react.html) | [查看](https://www.bilibili.com/video/BV1xY4y1t7NR/) | [mars3d-react-example](https://github.com/marsgis/mars3d-react-example) | [mars3d-react-example](https://gitee.com/marsgis/mars3d-react-example) |
## 最简项目模板
提供了面向不同技术栈的最简项目模板，您可以直接使用或参考这些项目模板，了解 SDK 类库在不同技术栈项目中如何引入使用，快速搭建开发自己的项目。
| 说明 | 视频 | Github 源码 | 国内 Gitee 源码 |
| --- | --- | --- | --- |
| 原生 JS 技术栈 | [查看](https://www.bilibili.com/video/BV1za41177ZW/) | [mars3d-es5-template](https://github.com/marsgis/mars3d-es5-template) | [mars3d-es5-template](https://gitee.com/marsgis/mars3d-es5-template) |
| Vue 技术栈 | [查看](https://www.bilibili.com/video/BV17P4y1F7gv/) | [mars3d-vue-template](https://github.com/marsgis/mars3d-vue-template) | [mars3d-vue-template](https://gitee.com/marsgis/mars3d-vue-template) |
| React 技术栈 | [查看](https://www.bilibili.com/video/BV1nZ4y1b7W7/) | [mars3d-react-template](https://github.com/marsgis/mars3d-react-template) | [mars3d-react-template](https://gitee.com/marsgis/mars3d-react-template) |
| Angular 技术栈 | 暂无 | [mars3d-angular-template](https://github.com/marsgis/mars3d-angular-template) | [mars3d-angular-template](https://gitee.com/marsgis/mars3d-angular-template) |
| CS 桌面端程序 | 暂无 | [mars3d-electron](https://github.com/marsgis/mars3d-electron) | [mars3d-electron](https://gitee.com/marsgis/mars3d-electron) |
| APP 移动端程序 | [查看](https://www.bilibili.com/video/BV18F41157qR/) | [mars3d-uni-app](https://github.com/marsgis/mars3d-uni-app) | [mars3d-uni-app](https://gitee.com/marsgis/mars3d-uni-app) |
## 基础项目
基础项目是具备一个 GIS 项目常见功能的项目模板，只用更换数据及叠加业务即可完成项目交付。如果需要更多功能可以考虑购买[付费项目模板](http://mars3d.cn/template.html)。
| 说明 | 教程 | 视频 | Github 源码 | 国内 Gitee 源码 |
| --- | --- | --- | --- | --- |
| 基础项目 原生 JS 版 | [查看](http://mars3d.cn/dev/guide/project/jcxm-es5.html) | [查看](https://www.bilibili.com/video/BV1nF41157Rn/) | [mars3d-es5-project](https://github.com/marsgis/mars3d-es5-project) | [mars3d-es5-project](https://gitee.com/marsgis/mars3d-es5-project) |
| 基础项目 Vue 版 | [查看](http://mars3d.cn/dev/guide/project/jcxm-vue.html) | [查看](https://www.bilibili.com/video/BV1JF411q7Ut/) | [mars3d-vue-project](https://github.com/marsgis/mars3d-vue-project) | [mars3d-vue-project](https://gitee.com/marsgis/mars3d-vue-project) |
| 基础项目 Vue 版+admin 管理 | 无 | 无 | [mars3d-vue-project-admin](https://github.com/marsgis/mars3d-vue-project-admin) | [mars3d-vue-project-admin](https://gitee.com/marsgis/mars3d-vue-project-admin) |
| 基础项目 React 版 | [查看](http://mars3d.cn/dev/guide/project/jcxm-react.html) | 暂无 | [mars3d-react-project](https://github.com/marsgis/mars3d-react-project) | [mars3d-react-project](https://gitee.com/marsgis/mars3d-react-project) |
| 三维地球 APP 项目 | [查看](http://mars3d.cn/dev/guide/project/app-vue.html) | [查看](https://www.bilibili.com/video/BV1iY4y1t7jk/) | [付费提供](http://mars3d.cn/details.html?id=app-vue) | [付费提供](http://mars3d.cn/details.html?id=app-vue) |
## 第 3 方平台融合
Mars3D 支持结合 Cesium 相关的各类平台来兼容使用，方便结合不同平台的优点来达到完成各种项目需求。
| 说明 | Github | 国内 Gitee |
| --- | --- | --- |
| 与 supermap 平台融合示例 | [mars3d-link-supermap](https://github.com/marsgis/mars3d-link-supermap) | [mars3d-link-supermap](https://gitee.com/marsgis/mars3d-link-supermap) |
| 与 earthsdk 平台融合示例 | [mars3d-link-earthsdk](https://github.com/marsgis/mars3d-link-earthsdk) | [mars3d-link-earthsdk](https://gitee.com/marsgis/mars3d-link-earthsdk) |
## 其他
| 说明 | Github | 国内 Gitee |
| --- | --- | --- |
| 部分开源插件 | [mars3d-plugin](https://github.com/marsgis/mars3d-plugin) | [mars3d-plugin](https://gitee.com/marsgis/mars3d-plugin) |
## 平台介绍
`Mars3D平台` 是[火星科技](http://marsgis.cn/)研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于[Cesium](https://cesium.com/cesiumjs/)优化提升与 B/S 架构设计，支持多行业扩展的轻量级高效能 GIS 开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种 GIS 数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。
## 学习资料
- 开发教程：[http://mars3d.cn/dev/](http://mars3d.cn/dev/)
- API 文档：[http://mars3d.cn/api/](http://mars3d.cn/api/)
- Mars3D 官网：[http://mars3d.cn](http://mars3d.cn)
### 反馈问题
为了方便交流及留存，所有 bug 及建议均统一提交至：[github issues](https://github.com/marsgis/mars3d/issues) 或 [国内 gitee issues](https://gitee.com/marsgis/mars3d/issues)
## 平台相关效果
功能示例： ![image](https://muyao1987.gitee.io/cdn/mars3d.cn/xm/example/1.jpg)
基础项目：[在线体验](http://mars3d.cn/project/es5/jcxm.html)
![image](https://muyao1987.gitee.io/cdn/mars3d.cn/xm/jcxm/1.jpg)
电子沙盘项目：[在线体验](http://mars3d.cn/project/es5/dzsp.html)
![image](https://muyao1987.gitee.io/cdn/mars3d.cn/xm/dzsp/1.jpg)
综合态势项目：[在线体验](http://mars3d.cn/project/es5/theme/login.html)
![image](https://muyao1987.gitee.io/cdn/mars3d.cn/xm/zhts/1.jpg)
## 版权说明
1. Mars3D 平台由[火星科技](http://marsgis.cn/)自主研发，拥有所有权利。
2. 任何个人或组织可以在遵守相关要求下可以免费无限制使用。
packages/mars3d/package.json 0 → 100644
{
"name": "mars3d",
"version": "3.3.12",
"description": "Mars3D三维可视化平台",
"keywords": [
"marsgis",
"mars3d",
"cesium",
"webgl",
"gis",
"3dgis",
"webgis"
],
"homepage": "http://mars3d.cn",
"bugs": {
"url": "https://github.com/marsgis/mars3d/issues",
"email": "wh@marsgis.cn"
},
"repository": {
"type": "git",
"url": "https://github.com/marsgis/mars3d.git"
},
"license": "Apache-2.0",
"author": "火星科技",
"main": "dist/mars3d.js",
"types": "dist/mars3d.d.ts",
"files": [
"dist"
],
"scripts": {
"lint": "eslint ./src/**/*.{js,ts} --fix"
},
"dependencies": {
"@turf/turf": "^6.5.0",
"mars3d-cesium": "^1.93.0"
},
"devDependencies": {},
"build": {
"plugin": false,
"globals": {
"@turf/turf": "turf",
"mars3d-cesium": "Cesium"
},
"importCss": {
"mars3d-cesium": "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
},
"minify": "obfuscator"
}
}
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
prettier.config.js
......@@ -12,7 +12,7 @@ module.exports = {
{
files: ['*.yml', '*.yaml'],
options: {
tabWidth: '2',
tabWidth: 2,
},
},
],
......
src/api/services/api-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/Map/Mars/cesium.ts 0 → 100644
import * as cesium from 'cesium'
import type { Cesium } from './src/tools'
// 重新导出一个自定义类型的 Cesium 变量，用来做类型同步
export default cesium as Cesium
src/components/Map/Mars/index.ts 0 → 100644
import { withInstall } from '/@/utils'
import marsMap from './src/MarsMap.vue'
export const MarsMap = withInstall(marsMap)
export * from './src/tools'
src/components/Map/Mars/src/MarsMap.vue 0 → 100644
<script lang="ts" setup>
// 引入cesium基础库
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
// 导入mars3d主库
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import './index.css'
import { config } from './tools'
import { nanoid } from 'nanoid'
import { propTypes } from '/@/utils/propTypes'
const props = defineProps({
id: propTypes.string,
width: propTypes.string.def('100%'),
height: propTypes.string.def('100%'),
})
const id = props.id ?? nanoid()
const mapRef = ref<mars3d.Map>()
onMounted(() => {
// 示例
// https://sandcastle.cesium.com/index.html
// 关闭一些基础配置
// http://events.jianshu.io/p/14b47da20909
const map = new mars3d.Map(id, config)
mapRef.value = map
})
onUnmounted(() => {
mapRef.value?.destroy()
})
defineExpose({
map: markRaw(mapRef),
})
</script>
<template>
<div :id="id" class="map"></div>
</template>
<style lang="less" scoped>
.map {
width: v-bind(width);
height: v-bind(height);
}
</style>
src/components/Map/Mars/src/index.css 0 → 100644
/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
top: auto;
bottom: 35px;
left: 12px;
right: auto;
}
.cesium-toolbar-button img {
height: 100%;
vertical-align: middle;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: left;
clear: both;
text-align: center;
}
.mar3d-toolButton img,
.mar3d-toolButton svg,
.mar3d-toolButton div {
width: 100%;
}
.cesium-button {
background-color: rgba(23, 49, 71, 0.7);
border: none;
color: #ffffff;
fill: #e6e6e6;
line-height: 32px;
}
.cesium-button:hover {
background-color: rgba(0, 138, 255, 0.7);
box-shadow: none;
border: none;
}
/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
bottom: 0;
left: 40px;
max-height: 700px;
margin-bottom: 5px;
background-color: rgba(23, 49, 71, 0.7);
}
/**cesium 帮助面板*/
.cesium-navigation-help {
top: auto;
bottom: 0;
left: 40px;
transform-origin: left bottom;
}
.cesium-navigation-help-instructions,
.cesium-navigation-button {
background-color: rgba(23, 49, 71, 0.8);
}
.cesium-navigation-button-selected,
.cesium-navigation-button-unselected:hover {
background-color: rgba(23, 49, 71, 1);
}
/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: right;
margin: 0 3px;
}
/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
z-index: 9999;
}
.cesium-geocoder-searchButton {
background-color: rgba(23, 49, 71, 0.8);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: rgba(23, 49, 71, 0.8);
}
/**cesium info信息框*/
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {
background-color: rgba(23, 49, 71, 0.8);
}
/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
top: 10px;
left: 10px;
right: auto;
}
.cesium-cesiumInspector {
background-color: rgba(23, 49, 71, 0.8);
}
/**覆盖mars3d内部控件的颜色等样式*/
.mars3d-compass .mars3d-compass-outer {
fill: rgba(23, 49, 71, 0.8);
}
.mars3d-contextmenu-ul,
.mars3d-sub-menu {
background-color: rgba(23, 49, 71, 0.8);
}
.mars3d-contextmenu-ul > li > a:hover,
.mars3d-sub-menu > li > a:hover,
.mars3d-contextmenu-ul > li > a:focus,
.mars3d-sub-menu > li > a:focus,
.mars3d-contextmenu-ul > li > .active,
.mars3d-sub-menu > li > .active {
background-color: #3ea6ff;
}
.mars3d-contextmenu-ul > .active > a,
.mars3d-sub-menu > .active > a,
.mars3d-contextmenu-ul > .active > a:hover,
.mars3d-sub-menu > .active > a:hover,
.mars3d-contextmenu-ul > .active > a:focus,
.mars3d-sub-menu > .active > a:focus {
background-color: #3ea6ff;
}
/* Popup样式*/
.mars3d-popup-color {
color: #ffffff;
}
.mars3d-popup-background {
background: rgba(23, 49, 71, 0.8);
}
.mars3d-template-content label {
padding-right: 6px;
}
.mars3d-template-titile {
border-bottom: 1px solid #3ea6ff;
}
.mars3d-template-titile a {
font-size: 16px;
}
.mars3d-popup-btn-custom {
padding: 3px 10px;
border: 1px solid #209ffd;
background: #209ffd1c;
}
.mars3d-popup-content {
margin: 15px;
}
.mars3d-divGraphic:hover {
z-index: 999 !important;
}
src/components/Map/Mars/src/tools.ts 0 → 100644
import { Ref } from 'vue'
import * as Cesium from 'mars3d-cesium'
import * as mars3d from 'mars3d'
// 定义类型
export type Cesium = typeof Cesium
// 服务域名
const tdtUrl = 'https://t{s}.tianditu.gov.cn/'
// 服务负载子域
const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
/**
* 资源服务器地址
*/
export const host = 'http://192.168.0.156'
// 天地图 token
export const token = 'aa0ccd36f2dbb86dbb16cbf63f0034a6'
interface MarsMapConfig {
scene?: mars3d.Map.sceneOptions
control?: mars3d.Map.controlOptions
mouse?: mars3d.Map.mouseOptions
effect?: mars3d.Map.effectOptions
terrain?: mars3d.Map.terrainOptions
basemaps?: mars3d.Map.basemapOptions[]
layers?: mars3d.Map.layerOptions[]
chinaCRS?: mars3d.ChinaCRS
lang?: mars3d.LangType
templateValues?: any
token?: mars3d.Map.tokenOptions
}
export const config: MarsMapConfig = {
basemaps: [{ name: '天地图', type: 'tdt', layer: 'img_d', show: true }],
scene: {
center: { lat: 30.054604, lng: 108.885436, alt: 22000000, heading: 0, pitch: -90 },
// center: {
// lat: 30.48564,
// lng: 112.86168,
// alt: 350,
// heading: 180,
// pitch: -25,
// roll: 0,
// },
scene3DOnly: false,
shadows: false,
removeDblClick: true,
sceneMode: 3,
showSun: true,
showMoon: true,
showSkyBox: true,
showSkyAtmosphere: true,
fog: true,
fxaa: true,
requestRenderMode: true,
globe: {
depthTestAgainstTerrain: false,
baseColor: '#546a53',
showGroundAtmosphere: true,
enableLighting: false,
},
cameraController: {
zoomFactor: 3.0,
minimumZoomDistance: 1,
maximumZoomDistance: 50000000,
enableRotate: true,
enableTranslate: true,
enableTilt: true,
enableZoom: true,
enableCollisionDetection: true,
minimumCollisionTerrainHeight: 15000,
},
},
control: {
homeButton: true,
baseLayerPicker: true,
sceneModePicker: true,
vrButton: false,
fullscreenButton: true,
navigationHelpButton: true,
animation: false,
timeline: false,
infoBox: false,
geocoder: false,
selectionIndicator: false,
contextmenu: { hasDefault: true },
mouseDownView: true,
zoom: { insertIndex: 1 },
compass: { bottom: 'toolbar', left: '5px' },
distanceLegend: { left: '0px', bottom: '2px' },
locationBar: {
fps: true,
format: "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
},
},
}
/**
* 默认的 Cesium3DTileset 配置项
*/
export const defaultTilesetConfig = {
show: true,
backFaceCulling: true,
maximumScreenSpaceError: 16,
maximumMemoryUsage: 256,
cullWithChildrenBounds: true,
cullRequestsWhileMovingMultiplier: 10,
dynamicScreenSpaceError: true,
dynamicScreenSpaceErrorDensity: 0.00278,
dynamicScreenSpaceErrorFactor: 4,
dynamicScreenSpaceErrorHeightFalloff: 0.25,
skipLevelOfDetail: true,
baseScreenSpaceError: 1024,
skipScreenSpaceErrorFactor: 16,
skipLevels: 1,
immediatelyLoadDesiredLevelOfDetail: false,
loadSiblings: true,
luminanceAtZenith: 0.2,
preferLeaves: true,
progressiveResolutionHeightFraction: 0.5,
debugFreezeFrame: false,
debugColorizeTiles: false,
debugWireframe: false,
debugShowBoundingVolume: false,
debugShowContentBoundingVolume: false,
debugShowViewerRequestVolume: false,
debugShowGeometricError: false,
debugShowRenderingStatistics: false,
debugShowMemoryUsage: false,
debugShowUrl: false,
}
/**
* 默认显示区域
*/
export const getDefaultRectangle = (Cesium: Cesium) =>
Cesium.Rectangle.fromDegrees(112.858933, 30.473384, 112.866068, 30.481188)
/**
* 天地图影像底图
*/
export const buildBaseImageryProvider = (Cesium: Cesium) => {
return new Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme: new Cesium.WebMercatorTilingScheme(),
maximumLevel: 18,
})
}
/**
* 2D 建模图层
*/
export const buildTiffImageryProvider = (Cesium: Cesium) => {
return new Cesium.UrlTemplateImageryProvider({
url: `${host}:1234/api/tilesets/kshg-2d-image/{z}/{x}/{y}.jpg`,
tilingScheme: new Cesium.WebMercatorTilingScheme(),
minimumLevel: 10,
maximumLevel: 24,
tileWidth: 256,
tileHeight: 256,
rectangle: getDefaultRectangle(Cesium),
})
}
/**
* 添加 2D 建模图层
* @param viewer Cesium.Viewer
*/
export const add2DImageLayer = (Cesium: Cesium, viewer: Cesium.Viewer) => {
// 叠加 2D 影像底图
viewer.imageryLayers.addImageryProvider(buildTiffImageryProvider(Cesium))
// 切换到影像可视区域
viewer.scene.camera.setView({ destination: getDefaultRectangle(Cesium) })
}
/**
* 添加 3D 倾斜摄影模型
* @param viewer Cesium.Viewer
*/
export const add3DTileset = (Cesium: Cesium, viewer: Cesium.Viewer) => {
const tileset = new Cesium.Cesium3DTileset({
url: `${host}:9003/model/ehXZf942/tileset.json`,
...defaultTilesetConfig,
shadows: Cesium.ShadowMode.DISABLED,
})
tileset.readyPromise.then((tileset) => {
// 模型与地面的高度差，单位：米
// 20m 是通过手动调试出来的结果
const height = -20
const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height)
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
// 叠加 3D 模型
viewer.scene.primitives.add(tileset)
// 切换到模型可视区域
// viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.5, tileset.boundingSphere.radius * 1.0))
// 切换到模型最佳可视区域
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(112.86168, 30.48564, 350),
orientation: {
heading: Cesium.Math.toRadians(180),
pitch: Cesium.Math.toRadians(-25),
roll: 0,
},
})
})
}
/**
* 获取 Cesium Viewer 实例
* @param ref 地图组件 ref
* @returns Cesium.Viewer
*/
export const getMapViewerInstance = (ref: Ref<any>): Cesium.Viewer => toRaw(ref.value?.viewer) as Cesium.Viewer
src/components/Tree/src/TreeIcon.ts
import type { VNode, FunctionalComponent } from 'vue'
import { h } from 'vue'
import { isString } from '@vue/shared'
import { isString } from '/@/utils/is'
import { Icon } from '/@/components/Icon'
export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
......
src/design/index.less
......@@ -42,3 +42,8 @@ svg,
span {
outline: none !important;
}
// ================ vben ================
.vben-default-layout-main {
margin-left: 0 !important;
}
src/layouts/default/index.vue
<template>
<Layout :class="prefixCls" v-bind="lockEvents">
<LayoutFeatures />
<LayoutHeader fixed v-if="getShowFullHeaderRef" />
<LayoutHeader fixed v-if="getShowFullHeaderRef && !hideLayout" />
<Layout :class="[layoutClass]">
<LayoutSideBar v-if="getShowSidebar || getIsMobile" />
<LayoutSideBar v-if="(getShowSidebar || getIsMobile) && !hideLayout" />
<Layout :class="`${prefixCls}-main`">
<LayoutMultipleHeader />
<LayoutMultipleHeader v-if="!hideLayout" />
<LayoutContent />
<LayoutFooter />
<LayoutFooter v-if="!hideLayout" />
</Layout>
</Layout>
</Layout>
......@@ -27,6 +27,7 @@
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
import { useDesign } from '/@/hooks/web/useDesign'
import { useLockPage } from '/@/hooks/web/useLockPage'
import { router } from '/@/router'
import { useAppInject } from '/@/hooks/web/useAppInject'
......@@ -58,6 +59,9 @@
return cls
})
// 判断是否需要隐藏布局
const hideLayout = computed(() => !!router.currentRoute.value.meta?.hideLayout)
return {
getShowFullHeaderRef,
getShowSidebar,
......@@ -66,6 +70,7 @@
getIsMixSidebar,
layoutClass,
lockEvents,
hideLayout,
}
},
})
......
src/locales/lang/zh-CN/routes/demo.ts
......@@ -161,7 +161,15 @@ export default {
page: '引导页',
},
example: {
page: '示例页',
example: '示例页',
api: 'API 示例',
hideLayout: '测试 - 隐藏布局',
fullScreen: '测试 - 自动全屏',
mapMars3d: 'Mars3d',
},
system: {
moduleName: '系统管理',
......
src/router/guard/index.ts
......@@ -12,6 +12,7 @@ import { createStateGuard } from './stateGuard'
import nProgress from 'nprogress'
import projectSetting from '/@/settings/projectSetting'
import { createParamMenuGuard } from './paramMenuGuard'
import { useFullscreen } from '@vueuse/core'
// Don't change the order of creation
export function setupRouterGuard(router: Router) {
......@@ -24,6 +25,7 @@ export function setupRouterGuard(router: Router) {
createPermissionGuard(router)
createParamMenuGuard(router) // must after createPermissionGuard (menu has been built.)
createStateGuard(router)
createAutoFullScreenGuard(router)
}
/**
......@@ -145,3 +147,23 @@ export function createProgressGuard(router: Router) {
return true
})
}
export function createAutoFullScreenGuard(router: Router) {
const { enter, exit, isFullscreen } = useFullscreen()
router.beforeEach(async (to) => {
if (to.meta.autoFullScreen) {
!isFullscreen.value && enter()
}
return true
})
router.afterEach(async (to) => {
if (!to.meta.autoFullScreen) {
isFullscreen.value && exit()
}
return true
})
}
src/router/routes/modules/demo/example.ts
......@@ -10,9 +10,8 @@ const setup: AppRouteModule = {
redirect: '/example/index',
meta: {
orderNo: 90001,
hideChildrenInMenu: true,
icon: 'healthicons:virus-lab-research-test-tube-outline',
title: t('routes.demo.example.page'),
title: t('routes.demo.example.example'),
},
children: [
{
......@@ -20,9 +19,39 @@ const setup: AppRouteModule = {
name: 'ExamplePage',
component: () => import('/@/views/demo/example/index.vue'),
meta: {
title: t('routes.demo.example.page'),
title: t('routes.demo.example.api'),
icon: 'healthicons:virus-lab-research-test-tube-outline',
hideMenu: true,
},
},
{
path: 'hide-layout',
name: 'HideLayoutPage',
component: () => import('/@/views/demo/example/index.vue'),
meta: {
title: t('routes.demo.example.hideLayout'),
icon: 'healthicons:virus-lab-research-test-tube-outline',
hideLayout: true,
},
},
{
path: 'auto-full-screen',
name: 'AutoFullScreenPage',
component: () => import('/@/views/demo/example/index.vue'),
meta: {
title: t('routes.demo.example.fullScreen'),
icon: 'healthicons:virus-lab-research-test-tube-outline',
hideLayout: true,
autoFullScreen: true,
},
},
{
path: 'mars3d',
name: 'MapMars3dPage',
component: () => import('/@/views/demo/example/map.mars3d.vue'),
meta: {
title: t('routes.demo.example.mapMars3d'),
icon: 'healthicons:virus-lab-research-test-tube-outline',
hideLayout: true,
},
},
],
......
src/utils/props.ts
// copy from element-plus
import { warn } from 'vue'
import { isObject } from '@vue/shared'
import { isObject } from './is'
import { fromPairs } from 'lodash-es'
import type { ExtractPropTypes, PropType } from '@vue/runtime-core'
import type { ExtractPropTypes, PropType } from 'vue'
import type { Mutable } from './types'
const wrapperKey = Symbol()
......
src/views/demo/example/index.vue
......@@ -12,6 +12,14 @@
text.value = body
}, 1500)
})
API.permission.tree
.request({
pid: '0',
})
.then((body) => {
console.log(body)
})
})
</script>
......
src/views/demo/example/map.mars3d.vue 0 → 100644
<script lang="ts" setup>
import { MarsMap } from '/@/components/Map/Mars'
import * as mars3d from 'mars3d'
const mapRef = ref<mars3d.Map>()
onMounted(() => {
console.log(mapRef.value)
})
</script>
<template>
<div class="main">
<MarsMap ref="mapRef" />
</div>
</template>
<style lang="less" scoped>
.main {
width: 100%;
height: 100vh;
// fix: 临时写法，无法使用 100% 会导致地图 resize 计算错误无限拉升高度，具体原因需要排查
// height: calc(100vh - 48px - 32px);
}
</style>
stylelint.config.js
......@@ -74,7 +74,7 @@ module.exports = {
overrides: [
{
files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
extends: ['stylelint-config-recommended'],
extends: ['stylelint-config-recommended', 'stylelint-config-prettier', 'stylelint-config-recommended-vue'],
rules: {
'keyframes-name-pattern': null,
'selector-pseudo-class-no-unknown': [
......@@ -94,7 +94,7 @@ module.exports = {
{
files: ['*.less', '**/*.less'],
customSyntax: 'postcss-less',
extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
extends: ['stylelint-config-standard', 'stylelint-config-prettier', 'stylelint-config-recommended-vue'],
},
],
}
types/vue-router.d.ts
......@@ -41,5 +41,9 @@ declare module 'vue-router' {
ignoreRoute?: boolean
// Hide path for children
hidePathForChildren?: boolean
// 隐藏布局
hideLayout?: boolean
// 自动全屏
autoFullScreen?: boolean
}
}
vite.config.ts
......@@ -81,6 +81,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// Turning off brotliSize display can slightly reduce packaging time
brotliSize: false,
chunkSizeWarningLimit: 2000,
commonjsOptions: {
//默认内部只处理了node_modules，需要将"packages/"也标识处理
include: /node_modules|packages/,
},
},
define: {
// setting vue-i18-next
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论