1.获取 Mars3D 从 npm 获取
使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包
//安装mars3d主库
npm install mars3d --save
//安装mars3d插件（按需安装）
npm install mars3d-space --save
2.在main.js引入Mars3D类库
使用Node环境下的现代web前端技术栈时，可以使用npm等来安装mars3d包并import导入后来使用。
import Vue from 'vue'
import App from './App.vue'
//在main.js中加入下面代码
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
//导入mars3d插件（按需使用，需要先npm install）
import 'mars3d-space'
//可以绑定下vue原型链，可以全局使用
Vue.prototype.mars3d = mars3d;
//在具体使用的vue等文件中
//直接使用 this.mars3d 进行相关调用。
window.mars3d= mars3d
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
3.安装copy-webpack-plugin
因为mars3d所依赖的Cesium是一个多文件资源的js库，需要对其依赖的一些资源文件进行拷贝处理（这也是容易出问题的地方）， 下面已Webpack技术栈为例，vue等其他技术栈类似（可以参考项目模板说明处理。
这里指定5.0版本，因为高于这个版本会报错
npm install copy-webpack-plugin@5.0.0 -save --dev
4.修改项目配置 vue.config.js，如建项目时没有这个文件，可在项目根目录新建，配置文件配置方法代码如下：
// webpack.config.js 或 vue.config.js
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/mars3d-cesium/Build/Cesium/'
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: './static',
productionSourceMap: false,
lintOnSave: false,
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('static')
}),
//vue3 start---------------------------------------------------------------------------------
/* new CopyWebpackPlugin({
patterns: [{ from: path.join(cesiumSource,'Workers'), to: 'static/Workers' }]
}),
new CopyWebpackPlugin({
patterns: [{ from: path.join(cesiumSource,'Assets'), to: 'static/Assets' }]
}),
new CopyWebpackPlugin({
patterns: [{ from: path.join(cesiumSource,'ThirdParty'), to: 'static/ThirdParty' }]
}),
new CopyWebpackPlugin({
patterns: [{ from: path.join(cesiumSource,'Widgets'), to: 'static/Widgets' }]
}) */
//vue3 end-----------------------------------------------------------------------------------
//vue2 start---------------------------------------------------------------------------------
new CopyWebpackPlugin([{ from: path.join(cesiumSource,'Workers'), to: 'static/Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource,'Assets'), to: 'static/Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource,'ThirdParty'), to: 'static/ThirdParty' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource,'Widgets'), to: 'static/Widgets' }])
//vue2 end-----------------------------------------------------------------------------------
]
},
/* devServer: {
port: 8081,
open: true,
proxy: {
//可以配置多个,(如果要同时请求第三方和后台服务器，可以配置多个，分别代理)
'/proxy': {
'target': 'http://localhost:8080/', //第三方接口地址
'secure': true, // false为http访问，true为https访问
'changeOrigin': true, // 跨域访问设置，true代表跨域
'pathRewrite': { // 路径改写规则
'^/proxy': '/' // 以/proxy/为开头的改写为'/'
}
}
}
} */
}
5.新建div容器并使用mars3d.Map方法创建地球(这里为了方便演示我直接写在App.vue里)
<template>
<div id="app">
地图
<div id="mars3dContainer" class="mars3d-container"></div>
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: "App",
methods: {
init() {
var mapOptions = {
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
};
var map = new mars3d.Map("mars3dContainer", mapOptions);
},
},
mounted() {
this.init();
},
};
</script>
<style>
#mars3dContainer{
height: 1000px;
}
</style>7.npm run serve 运行项目实例，即可出现一个白色地球，地图的各种样式在上面的init()方法中自行创建
