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 = falsenew 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()方法中自行创建

Vue2项目引入mars3d相关推荐

Vue2项目引入vant报错问题解决export ‘isVNode‘ (imported as ‘isVNode‘)
首次使用vue2项目安装vant,在基本配置完成之后使用vant组件出现了如下错误: 报错原因:vue版本和vant版本不一致,我这里是vue 2安装了vant 3 版本解决方案: 步骤一:卸载va ...
vue2项目引入ts实操记录(一)
背景: vue2+ElementUi 原因: 之所以要在vue2中引入ts,是为了规范项目,更是为了后面学习vue3+ts做准备. 移入ts修改思路: 先修改.vue文件-----------再修改全 ...
vue2项目引入社交分享插件vshare
vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点. github地址:https://github ...
vue2项目引入vue-video-player
直接安装npm install vue-video-player --save报错指定版本:npm install vue-video-player@5.0.1 --save vue-video-p ...
Vue2项目引入矢量图报错（显示□）
常规来说,在assist文件夹下建立icon,并且把下载的文件包一股脑装进去,然后在main.js导入样式即可. 但是我尝试多次无论是 APP.VUE或者main.js 均无效. 回到public文件 ...
前端vue2项目引入第三方js文件或者远程js文件并执行相应方法
啥也不多说,直接上结论新建一个目录和文件例如: ./tools/load.js //引入远程js,加载完成后执行相应方法 function loadJs(src) {return new Promi ...
超级详细的手写webpack4配置来启动vue2项目（附配置作用）
基础目录结构以及各个文件的作用初始npm项目 npm init 一路回车,一律使用默认的npm项目配置 package.json修改scripts 如下: {"name": &q ...
使用 Vue3 重构 Vue2 项目(长文)
前言 2020年9月18日,vue3正式版发布了,前几天把文档整体读了一遍,感触很深,可以解决我项目中的一些痛点,于是就决定重构之前那个vue2的开源项目. 本篇文章就记录下重构vue2项目的过程,欢 ...
前端Vue2项目开发常用依赖
前端Vue2项目开发常用依赖一.常用依赖 1.axios请求库 2.core-js 开源库zloirock/core-js 提供了es5.es6的polyfills,包括promises.symbo ...
vue2项目使用高德api内嵌地图，点标记+行政区分颜色
前言:公司想在vue2项目中嵌入海南省的地图,在地图上标记出一些地址信息,省内的县区等各个区块展示不同的颜色,需求不是很难. 官网:https://lbs.amap.com/api/jsapi-v2/ ...

Vue2项目引入mars3d

Vue2项目引入mars3d相关推荐

最新文章

热门文章