Vue2项目引入mars3d

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>

6.npm run serve 运行项目实例，即可出现一个白色地球，地图的各种样式在上面的init()方法中自行创建