mras3d的基本使用

渊来有你

已于 2022-03-23 18:56:48 修改

阅读量1.1k

点赞数 1

分类专栏： mars3D 文章标签： 3d

于 2021-10-31 09:57:29 首次发布

本文链接：https://blog.csdn.net/weixin_51935690/article/details/121060332

版权

mars3D 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

渊来有你

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
mras3d的基本使用

Mars3D官网网址Vue2版本的mars3D模板项目 vue2Vue3版本的mars3D vue3第一步．vue项目中引入mars3D1.从 npm 获取使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包安装 //安装mars3d主库npm install mars3d --save 安装成功后node_modules中会有一下两个目录,cesium是mars3D的一个依赖库2.从 CDN 获取在public下ind
复制链接

扫一扫