一、vite项目流程创建

创建完vite项目后，开始进行Mars3d

二、Mars3d在vite中的应用

1、获取SDK类库

//安装mars3d主库，其中mars3d-cesium  @turf/turf为依赖库
npm install mars3d mars3d-cesium  @turf/turf  --save 

//安装mars3d插件（按需安装）
npm install mars3d-space --save

安装后在main.ts中引入相关文件使用

//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";

//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";

可能遇到的问题

1、在main.ts中引入相关文件后提交可能会报git错误

打开git日志后可以发现是报了一个类似这种提示：husky - pre-commit hook exited with code 1 (error) 百度查找到，项目中是否有找到 pre-commit 文件，然后进行删除即可提交

参考CSDN文章

2、在项目中集成Mars3d--修改vite项目中的配置

根据文档，修改文件：vite.config.ts，参考项目：mars3d-vue3-vite

关键代码及步骤：

安裝依赖库

npm install vite-plugin-mars3d --save-dev

修改 vite.config.ts 配置文件

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [mars3dPlugin()]
});

`可能遇到的问题：`

1、vite使用Mars3dimport { defineConfig } from 'vite'报错，没有导出defineConfig

原因：vite版本过低

解决：修改package.json里vite的版本

"devDependencies": {
   "vite": "^2.9.14",
  }

这时把node-modules删掉，重新npm i，注意：npm i可能由于网络问题下载的资源缺少，可以cnpm i 。

2、报错信息：[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.se the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

Plugin: vite:import-analysis

有需要的安装@vitejs/plugin-vue

cnpm install @vitejs/plugin-vue --save-dev//这里安装会是最新版本的

然后再配置vite项目配置文件：vite.config.js

import { defineConfig } from 'vite';
// Vue支持：通过 @vitejs/plugin-vue插件支持
import vue from "@vitejs/plugin-vue";
import { vitePluginMars3d } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [
    vue(),
    vitePluginMars3d()
]
});

安装完后记得重新cnpm install

再npm run dev

直接npm install @vitejs/plugin-vue --save-dev 会报错

3、继续报错，报错信息为：

vite-Mars@0.0.0 dev

vite

failed to load config from C:\Users\Administrator.DESKTOP-JG1G886\Desktop\练习\vite-Mars\vite.config.ts error when starting dev server: TypeError: vite.createFilter is not a function

问题原因是：vite插件与vite版本不一致，参考链接

解决方法：

1、升级到vite3
npm install -D vite@^3.0.0
2、降低插件版本
 cnpm install @vitejs/plugin-vue@2.0.0 --save-dev

这样界面就恢复了。

3、Mars3d

根据上文提过的项目：mars3d-vue3-vite，来进行Mars的编写与配置

1、拷贝文件

场景配置文件：public\config\config.json

组件定义文件：src\components\mars-work\mars-map.vue

2、需要的组件中引入 Map 组件创建地球

参考 src\App.vue文件引入 Map 组件和构造创建地球，主要关注下下面代码处

// script

import mainView from "../../components/mars-work/mars-map.vue";

<!-- template -->
//<MarsMap :url="configUrl" map-key="test" @onload="marsOnload" />
<mainView />

全部代码：

<template>
  <div>
    <mainView />
  </div>
</template>
<script lang="ts"  setup>
import mainView from "../../components/mars-work/mars-map.vue";
</script>
<style lang='scss' scoped>
</style>

这里可能会出现图层不显示的问题：

天地图权限类型错误不支持的key类型 403 Forbiddened 问题解决

这里将链接单拎出来请求是没问题的，然后开始百度，说是html中的一个设置导致的

解决：改成content="strict-origin-when-cross-origin"

<meta name="referrer" content="strict-origin-when-cross-origin">

然后多数图层都可以显示，但还是会有类型key不支持的请求出现：参考文章：有只老羊在发呆

略： 3、访问 mars3d 和 Cesium 实例

项目中已经将 mars3d 和 Cesium 实例挂载到 globalProperties，通过如下方式获取

const instance = getCurrentInstance();
const mars3d = instance?.appContext.config.globalProperties.mars3d;
const Cesium = instance?.appContext.config.globalProperties.Cesium;

略：4、在app.vue中引入map组件后，在main.ts中引用以下代码

import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
import "mars3d/dist/mars3d.css"

如果，之前是main.js ，但是这里使用的是ts,所以相应的，把index.html中的地址换成main.ts

//index.html
<script type="module" src="/src/main.ts"></script>

给全局一个样式

//index.css
body,
html,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-gis {
  background-size: auto;
  overflow: hidden;
  left: 0;
  width: "100%";
  position: absolute;
  transition: all 0.3s;
}

.collapsed {
  left: 0;
  width: 100%;
  height: 100%;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #62a8ea;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #89bceb;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline: none;
  outline-offset: -2px;
}
ul,
li {
  list-style: none;
}

/*dark样式*/
a {
  color: #ffffff;
  text-decoration: none;
}
a:hover {
  color: #cc3300;
  text-decoration: underline;
}

Mars3d试水--vite