vue+Mar3d初探 之vue环境配置 (集成Mars3D到已有项目中)_mark3d vue2

1.获取 Mars3D 从 npm 获取
使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包

//安装mars3d主库
npm install mars3d --save   

//安装mars3d插件（按需安装）
npm install mars3d-space --save
1
2
3
4
5

2.引入Mars3D类库
使用Node环境下的现代web前端技术栈时，可以使用npm等来安装mars3d包并import导入后来使用。

//在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 进行相关调用。
1
2
3
4
5
6
7
8
9
10
11
12

3.安装copy-webpack-plugin
因为mars3d所依赖的Cesium是一个多文件资源的js库，需要对其依赖的一些资源文件进行拷贝处理（这也是容易出问题的地方）， 下面已Webpack技术栈为例，vue等其他技术栈类似（可以参考项目模板说明处理。
这里指定5.0版本，因为高于这个版本会报错

npm install copy-webpack-plugin@5.0.0 -save --dev
1

4.修改项目配置webpack.config.js 或 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/为开头的改写为'/'             
                }
            }
        }
    } */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

5.新建div容器

<div id="mars3dContainer" class="mars3d-container"></div> 
1

6.使用mars3d.Map方法创建地球

export default {
	methods: {
	  init () {
		  var map = new mars3d.Map('mars3dContainer', {
			  
		  })
	    /* var mapOptions = {} */ //支持的参数请看API文档：http://mars3d.cn/api/Map.html
	    /* var map = new mars3d.Map('mars3dContainer', mapOptions) */		
	   /* viewer._cesiumWidget._creditContainer.style.display = "none"; */// 隐藏版权
	  }
	},
	mounted () {
	  this.init()
	}
  
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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