我们使用DIV渲染后看到的三维地球对象，我们统称为三维场景，在Mars3D中对应是mars3D.Map类，这是一切的开始，所有相关控制的起点。掌握学习好了mars3d.Map类 基本也就掌握好了Mars3D

mars3d.Map类 参数说明

  • 地图类 ，这是构造三维地球的一切的开始起点。
  • new mars3d.Map(id, options)
  • id 地图容器的div的id options 参数集合 | 参数名 | 类型 | 参数api | 场景 | | —- | —- | —- | —- | | scene | Object | 参数链接 | 场景 | | control | Object | 参数链接 | 控件 | | terrain | Object | 参数链接 | 地形 | | basemaps | Array | 参数链接 | 底图图层 | | layers | Array | 参数链接 | 图层 |

三维场景初始化

  1. // 创建三维地球场景
  2. var map = new mars3d.Map('mars3dContainer', {
  3.   /*场景参数*/
  4.   scene: {
  5.     //默认视角参数
  6.     center:{ 
  7.      lat: 30.054604, //纬度值
  8.      lng: 108.885436, //经度值
  9.      alt: 17036414, //高度值
  10.      heading: 0, //方向角度值，绕垂直于地心的轴旋转角度, 0-360
  11.      pitch: -90, //俯仰角度值，绕纬度线旋转角度, 0-360
  12.      roll: 0, //翻滚角度值，绕经度线旋转角度, 0-360
  13.     },
  15.     scene3DOnly: true,//为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
  16.     highDynamicRange: true, // 是否关闭高动态范围渲染(不关闭时地图会变暗)
  18.     shadows: false, //是否启用日照阴影
  19.     removeDblClick: true, //是否移除Cesium默认的双击事件
  21.     //以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
  22.     sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D, 初始场景模式 2d 3d
  24.     //以下是Cesium.Scene对象相关参数
  25.     showSun: true, //是否显示太阳
  26.     showMoon: true, //是否显示月亮
  27.     showSkyBox: true, //是否显示天空盒
  28.     showSkyAtmosphere: true, //是否显示地球大气层外光圈
  29.     fog: true, //是否启用雾化效果
  30.     fxaa: true, //是否启用抗锯齿
  32.     //以下是Cesium.Globe对象相关参数 globe地球相关参数
  33.     globe: {
  34.       depthTestAgainstTerrain: false, //是否启用深度监测
  35.       baseColor: '#546a53', //地球默认背景色
  36.       showGroundAtmosphere: true, //是否在地球上绘制的地面大气
  37.       enableLighting: false //是否显示昼夜区域
  38.     },
  39.     //以下是Cesium.ScreenSpaceCameraController对象相关参数  相机操作相关参数
  40.     cameraController: {
  41.       zoomFactor: 3.0, //鼠标滚轮放大的步长参数
  42.       minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
  43.       maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
  44.       enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
  45.       enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
  46.       enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
  47.       enableZoom: true, // 是否允许 用户放大和缩小视图
  48.       enableCollisionDetection: true //是否允许 地形相机的碰撞检测
  49.     }
  50.   },
  51.   /*控件参数*/
  52.   control: {
  53.     baseLayerPicker: true, //basemaps底图切换按钮
  54.     homeButton: true, //视角复位按钮
  55.     sceneModePicker: true, //二三维切换按钮
  56.     navigationHelpButton: true, //帮助按钮
  57.     fullscreenButton: true, //全屏按钮 
  58.   },
  59.   /*地形服务*/
  60.   terrain: {
  61.     url: 'http://data.mars3d.cn/terrain',
  62.     show: true
  63.   },
  64.   //使用自定义的 wms 图层
  65.   basemaps: [{
  66.       name: 'wms图层',
  67.       type: 'wms',
  68.       url: baseMapUrl,
  69.       layers: baseLayer,
  70.       parameters: {
  71.          transparent: true,
  72.          format: "image/png",
  73.       },
  74.      alpha: 1, //透明度
  75.      show: true,
  76.      hasZIndex: true,
  77.      zIndex: 1,
  78.    }]
  79. })

  • 地图创建好通过 map.setSceneOptions来更新场景参数

    1. // 更新地球参数
    2. map.setSceneOptions({
    3. cameraController: {
    4.   maximumZoomDistance: 500000000
    5. }
    6. })

    禁止缩放

    1. map.scene.screenSpaceCameraController.enableZoom = false;

    添加网格线

    1. map.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())

    只让地球显示一块区域，其余裁剪

    1. var coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(-180.0, -23.43687, 180.0, 23.43687);
    2. map.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;

    创建地形

  • map.terrainProvider 获取或设置当前的地形服务

  • 通过 mars3d.LayerUtil.createTerrainProvider 创建地形服务对象，然会赋值给 map.terrainProvider
  • 目前一个地球只支持一个地形服务 ```javascript map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({ type: ‘arcgis’, url: ‘https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer‘, })

//关闭或开启地形，只需要修改下面属性 map.hasTerrain = false

  1. <a name="RYqch"></a>
  2. ### 创建wms瓦片底图
  3. [坐标系及坐标变换](http://mars3d.cn/dev/guide/map/crs.html)
  5. - WGS84坐标系：地球坐标系，目前国际通用的标准坐标系，通常称呼为标准无偏坐标系。
  6. - GCJ02坐标系：在我国，出于国家安全考虑，国内所有导航电子地图必须使用国家测绘局制定的加密坐标系统，即将一个真实的经纬度坐标加密成一个不正确的经纬度坐标，我们在业内将前者称之为地球坐标，后者称之为火星坐标(GCJ-02)
  7. ```javascript
  8. let tileLayer = new mars3d.layer.WmsLayer({
  9.   url: mapUrl,
  10.   layers: mapLayer,
  11.   crs:'EPSG:3857',//瓦片数据的坐标系信息
  12.   chinaCRS:"GCJ02",//标识瓦片的国内坐标系（用于自动纠偏或加偏）
  13.   parameters: {
  14.     transparent: "true",
  15.     format: "image/png"
  16.   },
  17.   flyTo: false,//加载完瓦片地图是否飞过去
  18. })
  19. map.addLayer(tileLayer);

使用json配置文件记录参数，快速创建三维场景

  • json’文件

    import options from “../assets/config.json”;

  1. "map3d":{
  2.   //场景参数一致
  3.   "scene":{}
  4. }
  1. let configUrl = 'http://mars3d.cn/example/config/config.json'
  2. mars3d.Resource.fetchJson({ url: configUrl }).then(function(json) {  
  3.   initMap(json.map3d)//构建地图
  5. }).otherwise(function(error) {
  6.   console.log('加载JSON出错', error)
  7. })
  9. // 读取到的json对象，传入 new mars3d.Map  方法创建地球
  10. function initMap(mapOptions) { 
  11.   //创建三维地球场景
  12.   var map = new mars3d.Map('mars3dContainer', mapOptions)
  13. }
  • 合并属性参数 ```javascript //合并属性参数，可覆盖config.json中的对应配置 options.map3d是配置内容 var mapOptions = mars3d.Util.merge(options.map3d, { //map3d中数据 //合并options的这些参数 scene: { center: {
    1. lat: 25.37169,
    2. lng: 119.094153,
    3. alt: 1182971,
    4. heading: 346,
    5. pitch: -60,
    }, }, });

//创建三维地球场景 this.map = new mars3d.Map(“mars3dContainer”, mapOptions); //构建 容器 合并后的参数 ```