Vue2项目引入mars3d
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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()方法中自行创建
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)