外观
2.静态引入方式集成到项目
Mars3D 提供了多种获取 SDK 类库和集成的方式，你可以根据项目的实际情况和技术栈，从下面方式中任选一种安装。
- npm包安装方式 ： 适合 Vue、React 等基于 Node 的开发框架项目，推荐使用。
- 静态引入方式 : 适合原生项目、npm安装存在问题时、离线内网环境、所有技术栈都可以使用。
- CDN方式集成到项目 : 适合临时演示及快速开始使用，不适合生产环境(CDN存在不稳定的情况)。
1. 下载SDK静态包
下载3个静态资源包，其中mars3d-cesium 和turf为依赖库。
mars3d 主库
下载稳定版 
下载开发版
mars3d-cesium库
下载稳定版
下载开发版
turf库
下载稳定版
下载开发版
2. 拷贝SDK到项目中
原生JS项目中
当在传统技术栈时(html/java/php/net 等)，可以在 html 的 head 标签中引入 Cesium 官方包和 Mars3D 包所有相关资源，此方法比较简单，mars3d 已经挂载在window 对象下面，不会出现各类集成问题。
第一步在项目根目录创建lib目录，将下载的mars3d-sdk.zip和mars3d-cesium.zip解压到lib目录下，解压整理后目录结构为：
index.html
img
mars3d.css
mars3d.js
widgets.css
Assets
ThirdParty
Workers
Cesium.js
turf.min.js
Vue等前端框架项目中
如果您是Vue、React等前端框架项目中，也可以使用静态引入方式，特别是在无法成功安装和集成，运行项目不正常时，可以采用此方式集成。
第一步在对应框架的静态文件目录创建lib，比如vue3项目的public目录下，目录结构为：
img
mars3d.css
mars3d.js
widgets.css
Assets
ThirdParty
Workers
Cesium.js
turf.min.js
src
index.html
3. 修改html页面head增加静态资源引入
修改页面head部分，增加引入cesium、mars3d、turf等静态资源，如下：
<!--引入cesium基础lib-->
<script>
// window.CESIUM_BASE_URL = "./lib/Cesium/" //非必须，如jsp、asp.net等非html框架报错时建议取消注释
</script>
<link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="./lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="./lib/turf/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<link href="./lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./lib/mars3d/mars3d.js" type="text/javascript"></script>
<!--引入mars3d库插件lib（按需引入）-->
<script src="./lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>4. 增加DIV展示容器
在需要呈现Mars3D地图的html页面中，加上 div 容器，并注意设置 div 的 css 高宽样式（可以直接用内置样式mars3d-container），如下：
<div id="mars3dContainer" class="mars3d-container"></div>5. 创建地图对象
在页面js代码中，，可通过window.mars3d.* 来使用 mars3d 相关类及方法。 可以增加如下代码，即可创建一个地图对象，并显示到页面中。
const mars3d = window.mars3d // 静态资源引入时，对象都是挂载在window中
const Cesium = window.mars3d.Cesium
// Map的参数请看API文档：http://mars3d.cn/api/Map.html
const map = new mars3d.Map("mars3dContainer", {
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
})6. 完成集成
这样你的Mars3D三维地球就集成完成了，您可以预览相关页面，查看地图效果。
新窗口查看
7. 常见问题
7.1 eslint错误校验问题解决
如果是ts、eslint相关技术栈项目中，window.*取值会存在eslint校验报错时，可以在.eslintrc.json的globals中增加如下配置：
.eslintrc.json
{
"root": true,
"globals": {
"Cesium": "readonly", //增加Cesium全局变量
"mars3d": "readonly" //增加mars3d全局变量
}
}7.2 如果想代码中import导入mars3d,打包时实际使用CDN
如果想代码中npm安装mars3d包和import导入使用,打包实际使用CDN时。 需要参考你使用项目的技术栈情况，按相关资料及技术栈API修改配置，排除mars3d、mars3d-cesium、@turf/turf的引用和打包，比如：
vue.config.js
module.exports = {
// 已忽略其他无关配置
configureWebpack: {
externals: {
"mars3d": "mars3d",
"mars3d-cesium": "Cesium",
"@turf/turf": "turf",
}
}
}vite.config.ts
import { defineConfig } from "vite"
import { viteExternalsPlugin } from "vite-plugin-externals"
export default defineConfig({
// 已忽略其他无关配置
plugins: [
viteExternalsPlugin({
externals: {
"mars3d": "mars3d",
"mars3d-cesium": "Cesium",
"@turf/turf": "turf",
}
})
]
})