整理代码

marsgis · Jan 2, 2022 · ddb5e5e · ddb5e5e
1 parent 61a6e0b
commit ddb5e5e
Show file tree

Hide file tree

Showing 21 changed files with 30,381 additions and 12,419 deletions.
diff --git a/mars3d-vue3-cli/package-lock.json b/mars3d-vue3-cli/package-lock.json
diff --git a/mars3d-vue3-cli/package.json b/mars3d-vue3-cli/package.json
@@ -13,7 +13,7 @@
     "axios": "^0.23.0",
     "core-js": "^3.6.5",
     "mars3d": "^3.1.19",
-    "vue": "^3.2.20"
+    "vue": "^3.2.26"
   },
   "devDependencies": {
     "@types/node": "^16.11.6",
@@ -37,7 +37,6 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "prettier": "^2.2.1",
-    "terser-webpack-plugin": "^5.2.4",
     "typescript": "~4.1.5"
   },
   "repository": {

diff --git a/mars3d-vue3-cli/public/config/config.json b/mars3d-vue3-cli/public/config/config.json
@@ -12,7 +12,7 @@
       "showSkyAtmosphere": true,
       "fog": true,
       "fxaa": true,
-      "requestRenderMode": false,
+      "requestRenderMode": true,
       "globe": {
         "depthTestAgainstTerrain": false,
         "baseColor": "#546a53",
@@ -35,7 +35,7 @@
       "homeButton": true,
       "baseLayerPicker": true,
       "sceneModePicker": true,
-      "vrButton": true,
+      "vrButton": false,
       "fullscreenButton": true,
       "navigationHelpButton": true,
       "animation": false,
@@ -46,6 +46,7 @@
 
       "defaultContextMenu": true,
       "mouseDownView": true,
+      "zoom": { "insertIndex": 1 },
       "compass": { "bottom": "toolbar", "left": "5px" },
       "distanceLegend": { "left": "100px", "bottom": "2px" },
       "locationBar": {
@@ -68,8 +69,7 @@
         "icon": "https://muyao1987.gitee.io/cdn/mars3d.cn/img/basemaps/tdt_img.png",
         "type": "tdt",
         "layer": "img_d",
-        "key": ["9ae78c51a0a28f06444d541148496e36"],
-        "show": true
+        "key": ["9ae78c51a0a28f06444d541148496e36"]
       },
       {
         "pid": 10,
@@ -123,7 +123,8 @@
         "layers": [
           { "name": "底图", "type": "tencent", "layer": "img_d" },
           { "name": "注记", "type": "tencent", "layer": "img_z" }
-        ]
+        ],
+        "show": true
       },
       {
         "pid": 10,

diff --git a/mars3d-vue3-cli/src/components/MarsMap/index.vue b/mars3d-vue3-cli/src/components/MarsMap/index.vue
@@ -3,6 +3,7 @@
 </template>
 <script setup lang="ts">
 import { computed, getCurrentInstance, onBeforeUnmount, onMounted } from "vue"
+import { isPc } from "@/utils/index"
 
 const instance = getCurrentInstance()
 const mars3d = instance?.appContext.config.globalProperties.mars3d
@@ -39,6 +40,41 @@ onMounted(() => {
 const emit = defineEmits(["onload"])
 const initMars3d = (option: any) => {
   map = new mars3d.Map(withKeyId.value, option)
+
+  // //针对不同终端的优化配置
+  if (isPc()) {
+    // Cesium 1.61以后会默认关闭反走样，对于桌面端而言还是开启得好，
+    map.scene.postProcessStages.fxaa.enabled = true
+
+    map.zoomFactor = 2.0 // 鼠标滚轮放大的步长参数
+
+    // IE浏览器优化
+    if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
+      map.viewer.targetFrameRate = 20 // 限制帧率
+      map.scene.requestRenderMode = true // 取消实时渲染
+    }
+  } else {
+    map.zoomFactor = 5.0 // 鼠标滚轮放大的步长参数
+    map.scene.screenSpaceCameraController.enableTilt = false
+
+    // 移动设备上禁掉以下几个选项，可以相对更加流畅
+    map.scene.requestRenderMode = true // 取消实时渲染
+    map.scene.fog.enabled = false
+    map.scene.skyAtmosphere.show = false
+    map.scene.globe.showGroundAtmosphere = false
+  }
+
+  // //二三维切换不用动画
+  if (map.viewer.sceneModePicker) {
+    map.viewer.sceneModePicker.viewModel.duration = 0.0
+  }
+
+  // webgl渲染失败后，刷新页面
+  // map.on(mars3d.EventType.renderError, async () => {
+  //   await $alert('程序内存消耗过大，请重启浏览器')
+  //   window.location.reload()
+  // })
+
   emit("onload", map)
 }
 

diff --git a/mars3d-vue3-cli/src/misc/index.d.ts b/mars3d-vue3-cli/src/misc/index.d.ts
diff --git a/mars3d-vue3-cli/src/misc/mars3d.d.ts b/mars3d-vue3-cli/src/misc/mars3d.d.ts
diff --git a/mars3d-vue3-cli/src/plugins/mars3d-plugin.ts b/mars3d-vue3-cli/src/plugins/mars3d-plugin.ts
@@ -1,10 +1,14 @@
 import { App } from "vue"
+
+import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
+import * as Cesium from "mars3d-cesium"
+
 import "mars3d/dist/mars3d.css"
 import * as mars3d from "mars3d"
 
 export default {
   install: (app: App) => {
+    app.config.globalProperties.Cesium = Cesium
     app.config.globalProperties.mars3d = mars3d
-    app.config.globalProperties.Cesium = mars3d.Cesium
   }
 }
diff --git a/mars3d-vue3-cli/src/utils/index.ts b/mars3d-vue3-cli/src/utils/index.ts
@@ -49,3 +49,23 @@ export function setAutoHeight(callback: (v: number) => void, lose = 0, container
 export function getQueryString(parameter: string): string | null {
   return new URL(window.location.href).searchParams.get(parameter)
 }
+
+
+/**
+ * 判断是否是pc端
+ *
+ * @export
+ * @return { boolean } 是否是pc端
+ */
+ export function isPc ():boolean {
+  const userAgentInfo = navigator.userAgent
+  const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]
+  let flag = true
+  for (let v = 0; v < Agents.length; v++) {
+    if (userAgentInfo.indexOf(Agents[v]) > 0) {
+      flag = false
+      break
+    }
+  }
+  return flag
+}
diff --git a/mars3d-vue3-js/.gitignore b/mars3d-vue3-js/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+mars3d-*src.*
 
 # local env files
 .env.local
@@ -21,3 +21,8 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/mars3d-vue3-js/README.md b/mars3d-vue3-js/README.md
@@ -1,24 +1,142 @@
-# mars3d-vue3-js
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+<p align="center">
+<img src="https://muyao1987.gitee.io/cdn/mars3d.cn/logo.png" width="300px" />
+</p>
+
+<p align="center">基于 Vue3.x + vueCLI+js 的 Mars3D🌎最简项目模板</p>
+
+
+<p align="center">
+<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 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://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>
+</p>
+
+
+## 建议环境配置
+
+1. 推荐使用 Visual Studio Code 编辑器
+2. 推荐安装 ESlint、Volar 插件（如果已经安装Vetur插件，需要禁用）并将格式化工具设置为eslint （settings.json配置如下）
+
+```json
+"[vue]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+},
+"[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+},
+"[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+},
+```
+
+## 运行命令
+
+### 首次运行前安装依赖
+
+```
+npm i
+```
+
+### 启动开发环境
+
+```
+npm run dev
+```
+
+### 打包构建
+
+```
+npm run build
+```
+
+## 运行效果 
+ [在线Demo](http://marsgis.gitee.io/mars3d-es5-template/)  
+
+
+## 如何集成到自己已有的项目中
+
+1. ### 安装mars3d依赖包
+```bash
+npm install mars3d   //或  cnpm install mars3d   或  yarn add mars3d
+```
+
+2. ### 拷贝文件
+ > 场景配置文件：`public\config\config.json`
+
+ > 组件定义文件：`src\components\mars3d\Map.vue`
+
+3. ### 需要的组件中引入Map组件创建地球 
+
+ 参考 `src\views\Index.vue`文件引入Map组件和构造创建地球，主要关注下下面代码处
+
+```javascript
+// script
+
+import MarsMap from "@comp/MarsMap/index.vue";
+```
+
+```html
+<!-- template -->
+
+<MarsMap url="config/config.json" map-key="yourkey" @onload="loadHandler" />
+```
+
+
+3. ### 配置vue.config.js 
+
+```js
+// vue.config.js 添加下面配置 
+const CopyWebpackPlugin = require('copy-webpack-plugin')  
+
+module.exports = {
+  //已忽略其他配置
+  configureWebpack: config => { 
+    let cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录
+    let cesiumRunPath = config.output.publicPath || './cesium/' //cesium运行时主目录
+    let plugins = [
+      //标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
+      new webpack.DefinePlugin({
+        CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)
+      }),
+      //cesium相关资源目录需要拷贝到系统目录下面
+      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path,cesiumRunPath, 'Workers') }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path,cesiumRunPath, 'Assets') }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path,cesiumRunPath, 'ThirdParty') }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path,cesiumRunPath, 'Widgets') }])
+    ]
+    return {
+      plugins: plugins
+    }
+  },
+}
+```
+
+4. ### 访问 mars3d 和 Cesium 实例
+
+
+```javascript
+import * as mars3d from "mars3d" 
+const Cesium = mars3d.Cesium
+```
+
+
+## Mars3D 是什么 
+>  `Mars3D平台` 是[火星科技](http://marsgis.cn/)研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于[Cesium](https://cesium.com/cesiumjs/)优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。
+
+ > Mars3D平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图形化，跨平台、跨浏览器来实现真正的动态大数据三维可视化。通过 Mars3D产品可快速实现浏览器和移动端上美观、流畅的三维地图呈现与空间分析。
+
+### 相关网站 
+- Mars3D官网：[http://mars3d.cn](http://mars3d.cn)  
+
+- Mars3D开源项目列表：[https://github.com/marsgis/mars3d](https://github.com/marsgis/mars3d)
+
+
+## 版权说明
+1. Mars3D平台由[火星科技](http://marsgis.cn/)自主研发，拥有所有权利。
+2. 任何个人或组织可以在遵守相关要求下可以免费无限制使用。