vue+Mar3d初探 之vue环境配置 (集成Mars3D到已有项目中)
1.获取 Mars3D从 npm 获取使用Node环境下的现代web前端技术栈时,可以使用npm或cnpm或yarn等方式来安装mars3d包//安装mars3d主库npm install mars3d --save//安装mars3d插件(按需安装)npm install mars3d-space --save2.引入Mars3D类库使用Node环境下的现代web前端技术栈时,可以使用npm等来
·
1.获取 Mars3D 从 npm 获取
使用Node环境下的现代web前端技术栈时,可以使用npm或cnpm或yarn等方式来安装mars3d包
//安装mars3d主库
npm install mars3d --save
//安装mars3d插件(按需安装)
npm install mars3d-space --save
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 进行相关调用。
3.安装copy-webpack-plugin
因为mars3d所依赖的Cesium是一个多文件资源的js库,需要对其依赖的一些资源文件进行拷贝处理(这也是容易出问题的地方), 下面已Webpack技术栈为例,vue等其他技术栈类似(可以参考项目模板说明处理。
这里指定5.0版本,因为高于这个版本会报错
npm install copy-webpack-plugin@5.0.0 -save --dev
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/为开头的改写为'/'
}
}
}
} */
}
5.新建div容器
<div id="mars3dContainer" class="mars3d-container"></div>
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>
7.npm run serve 运行项目实例,即可出现一个白色地球,地图的各种样式在上面的init()方法中自行创建
更多推荐
已为社区贡献4条内容
所有评论(0)