Mars3D官网网址
Vue2版本的mars3D模板项目 vue2
Vue3版本的mars3D vue3
第一步．vue项目中引入mars3D
1.从 npm 获取
使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包
- 安装
//安装mars3d主库
npm install mars3d --save
安装成功后node_modules中会有一下两个目录,cesium是mars3D的一个依赖库
2.从 CDN 获取
在public下index.html的head标签中引入Mars3D包相关资源
<!-- 方式2：使用cdn引入的Cesium -->
<link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript"></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>
<!--引入mars3d库lib-->
<link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/bpm/mars3d/dist/mars3d.js" type="text/javascript" ></script>
第二步，建立mars3d模板
配置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: './',
assetsDir: './static',
productionSourceMap: false,
lintOnSave: true, // 是否开启eslint
// 它支持webPack-dev-server的所有选项
devServer: {
host: 'localhost', // 也可以直接写IP地址这样方便真机测试
port: 3001, // 端口号
https: false, // https:{type:Boolean}
open: true // 配置自动启动浏览器
},
configureWebpack: (config) => {
let plugins = []
if (process.env.NODE_ENV === 'production') {
plugins = [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./static')
}),
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' }])
]
} else {
plugins = [
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
}),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: './Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: './Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: './ThirdParty' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: './Widgets' }])
]
}
return {
module: {
unknownContextCritical: false,
rules: [
{
test: /\.js$/,
enforce: 'pre',
include: path.resolve(__dirname, 'node_modules/mars3d-cesium/Source'),
sideEffects: false
}
]
},
optimization: {
usedExports: true,
splitChunks: {
maxInitialRequests: Infinity,
minSize: 0,
maxSize: 250000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'all',
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `npm.${packageName.replace('@', '')}`
}
},
commons: {
name: 'Cesium',
test: /[\\/]node_modules[\\/]mars3d-cesium[\\/]Build[\\/]Cesium/,
priority: 10,
chunks: 'all'
}
}
}
},
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': path.resolve('src')
}
},
node: {
fs: 'empty',
Buffer: false,
http: 'empty',
https: 'empty',
zlib: 'empty'
},
plugins: plugins
}
}
}
4.然后就可以使用了，在组件中建立一下模板，所有样式在onMapload方法里面自行添加，可以查看官网中的api文档进行配置
<template>
<div id="centerDiv" class="mapcontainer">
</div>
</template>
<script>
import Map from '../components/mars3d/Map.vue'
export default {
name: 'Index',
data() {
},
methods: {
// 地图构造完成回调
onMapload() {
// 以下为演示代码，是一个地球的基本形状
//创建三维地球场景
var map = new mars3d.Map("mars3dContainer", { //容器 属性
scene: { //场景参数
center: { //默认相机视角
lat: 30.054604, //纬度值
lng: 108.885436, //经度值
alt: 1736414, //高度值
heading: 0, //方向角度值
pitch: -90, //俯仰角度值
},
},
shadows: false, //是否启用日照阴影
removeDblClick: true, //是否移除Cesium默认的双击事件
//以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D,
//以下是Cesium.Scene对象相关参数
showSun: true, //是否显示太阳
showMoon: true, //是否显示月亮
showSkyBox: true, //是否显示天空盒
showSkyAtmosphere: true, //是否显示地球大气层外光圈
fog: true, //是否启用雾化效果
fxaa: true, //是否启用抗锯齿
//以下是Cesium.Globe对象相关参数
globe: {
depthTestAgainstTerrain: false, //是否启用深度监测
baseColor: "#546a53", //地球默认背景色
showGroundAtmosphere: true, //是否在地球上绘制的地面大气
enableLighting: false, //是否显示昼夜区域
},
//以下是Cesium.ScreenSpaceCameraController对象相关参数
cameraController: {
zoomFactor: 3.0, //鼠标滚轮放大的步长参数
minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
enableZoom: true, // 是否允许 用户放大和缩小视图
enableCollisionDetection: true, //是否允许 地形相机的碰撞检测
},
control:{
baseLayerPicker: true, //basemaps底图切换按钮
homeButton: true, //视角复位按钮
sceneModePicker: true, //二三维切换按钮
navigationHelpButton: true, //帮助按钮
fullscreenButton: true, //全屏按钮
},
terrain: {
url: "http://data.marsgis.cn/terrain",
show: true,
},
basemaps: [ //底图图层配置
{
name: "天地图影像",
type: "tdt", //类型
layer: "img_d", //底图
show: true,
},
],
});}}，
mounted() {
this.onMapload();
}
}
<style lang="scss" scoped>
.mapcontainer {
position: relative;
height: 100%;
overflow: hidden;
}
</style>