Mars3D开发基础学习:三维场景 Map
我们使用DIV渲染后看到的三维地球对象,我们统称为三维场景,在Mars3D中对应是mars3d.Map类 ,这是一切的开始,所有相关控制的起点。掌握学习好了mars3d.Map类 基本也就掌握好了Mars3D。
#1. 三维场景初始化
在使用mars3d时你可以根据需要对默认参数进行配置,如果你只是想得到默认的效果,你仅需要写下面一行代码即可:
var map = new mars3d.Map('mars3dContainer')
当你需要对地图进行配置的时候,mars3d提供了详细的参数配置方案(如下),你可以暂时不需要完全理解各个参数的意义,在接下来的后续教程中我们会详细解释相关参数。
// 创建三维地球场景
var map = new mars3d.Map('mars3dContainer', {scene: {//默认视角参数center:{ lat: 30.054604, lng: 108.885436, alt: 17036414, 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.mars3d.cn/terrain',show: true},basemaps: [{name: '天地图卫星',icon: 'img/basemaps/tdt_img.jpg',type: 'tdt',layer: 'img_d',key: ['9ae78c51a0a28f06444d541148496e36'],show: true}]
})
#2. mars3d.Map类 参数说明
参数名 | 类型 | 参数解释 |
---|---|---|
id | String 或 Cesium.Viewer | 地图容器的div的id或已经构造好的viewer对象 |
mapOptions | Object | 创建地球的参数 |
mapOptions 参数包括:
参数名 | 类型 | 参数API | 说明 |
---|---|---|---|
scene | Object | 参数清单 | 场景 |
control | Object | 参数清单 | 控件 |
terrain | Object | 参数清单 | 地形 |
basemaps | Array | 参数清单 | 底图图层 |
layers | Array | 参数清单 | 图层 |
更详细说明,参考 API文档 Map类
#2.1 使用json配置文件记录参数快速创建三维场景
我们在不同项目应用时,可能是同一套代码,仅仅只是地图的配置参数不一样, 那么我们可以把地图的参数保存在后端服务动态生成或存储在json文件,将三维场景参数化。 我们可以直接加载使用不同json数据来快速创建各种三维场景。
#(1)通过任意方式去读取json文件,下面只是一种演示的方式
let configUrl = 'http://mars3d.cn/config/config.json'
mars3d.Resource.fetchJson({ url: configUrl }).then(function(json) { initMap(json.map3d)//构建地图}).otherwise(function(error) {console.log('加载JSON出错', error)
})
#(2)读取到的json对象传入new mars3d.Map
方法创建地球
function initMap(mapOptions) { //创建三维地球场景var map = new mars3d.Map('mars3dContainer', mapOptions)
}
config.json
中的属性参数是与mapOptions参数相同。
#2.2 运行效果
新窗口查看
#3. scene 场景参数
scene场景是所有3D图形对象的容器(HTML canvas),在场景对象中我们可以控制:globe 椭圆体、camera相机 等。 在创建地图时,你可以通过参数中scene
参数配置场景中的默认视角(类似二维地图的地图层级)、三维场景的各种参数控制、相机的各种控制等。 参数解释参考 API文档
var map = new mars3d.Map('mars3dContainer', {scene: {//默认视角参数center: { lat: 30.715648, lng: 116.300527, alt: 10727, heading: 3, pitch: -25 },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, //是否允许 地形相机的碰撞检测},},
})
地球创建好之后,你可以通过参考下面代码示例来更新scene参数
// 更新地球参数
map.setSceneOptions({cameraController: {maximumZoomDistance: 500000000}
})
#4. 默认视角参数
你如果想设置进入地图页面时,自定义默认视角和地图层级的话,你可以在创建地球时的scene参数中设置center参数 值:
var map = new mars3d.Map('mars3dContainer', {scene: {center: { lat: 25.389914, lng: 119.084961, alt: 1179575, heading: 346, pitch: -60 }}
})
center参数不容易手动修改,建议通过map.getCameraView 方法获取当前的地图视角后拷贝设置到config.json中。或者在地图空白区域右键菜单中【查看当前视角】来快捷获取下参数值。
#5. 控件
在创建地球的时候,你可以在配置项中通过control
对控件中的功能组件进行相应的配置,支持的参数,参考 control参数说明
var map = new mars3d.Map('mars3dContainer', {control: {//以下是Cesium.Viewer所支持的控件相关的optionsbaseLayerPicker: true, //basemaps底图切换按钮,图层选择器,选择要显示的地图服务和地形服务homeButton: true, //视角复位按钮sceneModePicker: true, //二三维切换按钮, 选择投影模式,有三种:3D,2D,哥伦布视图navigationHelpButton: true, //帮助按钮,显示默认的地图控制帮助infoBox: true, //信息框selectionIndicator: true, //选择框vrButton: true, //vr模式按钮fullscreenButton: true, //全屏按钮animation: false, //动画部件按钮(左下角),控制视图动画的播放速度timeline: false, //时间线(下侧),指示当前时间,并允许用户跳到特定的时间geocoder: true, //POI查询按钮geocoderConfig: { key: ['ae29a37307840c7ae4a785ac905927e0'] }, //POI查询按钮参数配置//以下是mars3d.control定义的控件defaultContextMenu: true, //右键菜单mouseDownView: true,compass: { top: '10px', right: '5px' },distanceLegend: { left: '100px', bottom: '2px' },},
})
#6. 地形参数
地形是三维场景中的重要三维效果,能看到山峰的高低起伏效果。在创建地球的时候,你可以在配置项中通过terrain
参数来设置和是否开启地形。支持的参数,参考 地形的terrain参数说明
var map = new mars3d.Map('mars3dContainer', {terrain: {//type:'xyz',//默认未传入时代表 'xyz'url: 'http://data.mars3d.cn/terrain',show: true},
})
#6.1 地形的type类型
地形的 type 支持以下类型
类名 | 说明 |
---|---|
xyz | 标准xyz服务(未配置时的默认值) |
arcgis | ArcGIS地形服务 |
ion | cesium官方ion在线服务 |
gee | 谷歌地球企业版服务 |
vr | vr地形服务 |
none | 无地形,标准椭球体 |
#6.2 更新地形
如果不想在创建时设置地形,也可以创建完map后, 通过 mars3d.LayerUtil.createTerrainProvider 创建地形服务对象,并赋值给 map.terrainProvider ,目前1个球只支持1个地形服务
map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({type: 'arcgis',url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
})
#7. 栅格瓦片底图
地形是三维的"骨骼",栅格底图就是我们浏览三维能感知的"皮肤"了,在创建地球的时候,你可以通过basemapse 添加栅格瓦片底图(允许添加多个,添加多个图层后可在底图控制器中切换),一般我们可以设置basemaps数组中默认显示的底图的show参数为true
var map = new mars3d.Map('mars3dContainer', {basemaps: [{name: '天地图卫星',icon: 'img/basemaps/tdt_img.jpg',type: 'tdt',layer: 'img_d',key: ['9ae78c51a0a28f06444d541148496e36'],show: true,},{name: '离线地图',icon: 'img/basemaps/mapboxSatellite.jpg',type: 'xyz',url: 'http://data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg',maximumLevel: 12,},{name: '单张图片',icon: 'img/basemaps/offline.jpg',type: 'image',url: 'img/tietu/world.jpg',},]
})
#7.1 底图的图层参数
栅格底图所支持的图层类型,只能是瓦片图层,均是继承自 BaseTileLayer类 的图层类型。basemaps参数为一个数组,其中各图层的参数支持:
basemaps参数说明
参数名 | 类型 | 参数解释 |
---|---|---|
type | string | 图层类型 |
icon | string | 图层缩略图,用于图层切换控件的显示 |
通用参数 | BaseTileLayer类构造参数 | |
其他参数 | 每个type都有一些个性化的不同参数,参考各type对应的图层类构造参数 |
#7.2 底图的type图层类型
basemaps所支持的type目前包括:
类型名 | 说明 | 对应的图层类 | 备注 |
---|---|---|---|
image | 单张图片 | mars3d.layer.ImageLayer | |
xyz | 标准金字塔地图 | mars3d.layer.XyzLayer | |
wms | OGC WMS标准服务 | mars3d.layer.WmsLayer | |
wmts | OGC WMTS标准服务 | mars3d.layer.WmtsLayer | |
arcgis | ArcGIS标准服务 | mars3d.layer.ArcGisLayer | |
arcgis_cache | ArcGIS切片 | mars3d.layer.ArcGisCacheLayer | |
tdt | 天地图 | mars3d.layer.TdtLayer | 在线地图 |
gaode | 高德 | mars3d.layer.GaodeLayer | 在线地图 |
baidu | 百度 | mars3d.layer.BaiduLayer | 在线地图 |
tencent | 腾讯 | mars3d.layer.TencentLayer | 在线地图 |
osm | OpenStreetMap(OSM) | mars3d.layer.OsmLayer | 国外在线地图 |
bing | 微软 BingMaps | mars3d.layer.ArcGisCacheLayer | 国外在线地图 |
mapbox | Mapbox地图 | mars3d.layer.MapboxLayer | 国外在线地图 |
ion | Cesium Ion服务 | mars3d.layer.IonLayer | 国外在线地图 |
谷歌地图 | mars3d.layer.GoogleLayer | 目前已被封 | |
gee | 谷歌地球企业服务 | mars3d.layer.GeeLayer | 需部署私服 |
#7.3 更新底图
创建完成底图后,需要切换底图或获取当前的底图,可以根据config配置的id或name属性,显示指定的底图,如:
//获取或设置当前显示的底图,设置时可以传入图层id或name
map.basemap = '离线地图' //获取配置的底图数组
let arr = map.getBasemaps()
#8. 可以叠加的图层
在三维地图中,你可以在地图上添加多个图层来叠加显示。 在创建地球时,可以传layers参数 来将当前项目内常用的图层一次性配置好,代码中去按需使用。
var map = new mars3d.Map('mars3dContainer', {layers: [{"type": "tdt", //必须的参数"name": "天地图注记","layer": "img_z","key": ["天地图token值"],"show": true},{"id":1987,"type": "3dtiles","name": "县城社区","url": "http://data.mars3d.cn/3dtiles/qx-shequ/tileset.json","show": false},]
})
#8.1 可以叠加的图层
layers 配置支持的 basemaps所有支持的瓦片图层,还支持所有矢量覆盖物数据的加载,支持的type类型,请参考 图层类型 ,每个type都有一些个性化的不同参数,参考各type对应的图层类构造参数。
#8.2 对图层的控制
可以通过 let layer = map.getLayer(1987,'id') 来获取config.json中配置的对应id为1987的图层对象。
为了方便理解getLayer获取到的对象,layers配置的图层与下面的创建方式是等价的,
//用工厂方法创建图层
var layer = mars3d.LayerUtil.create({"type": "3dtiles","name": "县城社区","url": "http://data.mars3d.cn/3dtiles/qx-shequ/tileset.json",
})
map.addLayer(layer)
在Map创建后可以通过addLayer 和removeLayer 方法来控制图层的加载和删除。
更多方法可以在图层类型 找到对应的 图层类 后,查阅对应类的属性或方法进行进一步控制及管理图层。
Mars3D开发基础学习:三维场景 Map相关推荐
- Mars3D开发基础学习:场景特效
平台支持一些场景特效,包括 雾天气,雨天气,雪天气, 泛光特效,亮度效果,夜视效果,黑白效果,马赛克效果,景深效果 等. #1. 特效的底层实现:后处理(Post Processing) 特效底层是使 ...
- Mars3D开发基础学习:矢量图层
三维场景中,地形和栅格来组成了三维的基础,但更多的业务还是需要 点线面等矢量数据来充实, 这就是我们的矢量数据图层. #1. 图层类型清单 当前主要使用的矢量图层,是指GraphicLayer 类及其 ...
- Mars3D开发基础学习:栅格瓦片图层
前面我们说到地形是三维场景的"骨骼",栅格瓦片图层就是我们浏览三维能感知的"皮肤"了,通常我们叠加的是各种卫星影像或瓦片数据. Mars3D支持多种服务来源的高 ...
- Mars3D开发基础学习:相机Camera及视角控制
Camera相机控制了三维场景的视图.有很多方法可以操作Camera,如旋转(rotate).缩放(zoom).平移(pan)和飞到目的地(flyTo).同时也有鼠标和触摸事件用来处理与Camrea的 ...
- Mars3D开发基础学习:Property属性机制
平台是数据驱动和 time-dynamic visualization,这些可都是仰仗Property属性机制来实现的. Property最大的特点是和时间相互关联,在不同的时间可以动态地返回不同的属 ...
- Mars3D开发基础学习:矢量数据
矢量数据 是用经度.纬度.高度坐标来表示地图图形或地理实体位置的数据,一般是通过记录坐标的方式来尽可能将地理实体的空间位置表现的准确无误,常见的矢量数据有:点.线.面.体等格式. #1. 矢量数据对象 ...
- Mars3D开发基础学习:glTF小模型
glTF全称是 Graphics Language Transmission Format (图形语言传输格式),是一种针对GL(WebGL,OpenGL ES以及OpenGL)接口的运行时资产传递格 ...
- Mars3D开发基础学习:坐标系及坐标变换
只要涉及到地图开发,无论如何关于坐标系的概念是逃不掉的,谁让地球它是个球呢. 地球就像个橘子 不同的坐标系就是不同的剝橘子的方法 这里就不列举国内常用的坐标系及转换方法,大家可以自行百度. 相关GIS ...
- Mars3D开发基础学习:Material材质
在真实世界里,每个物体会对光产生不同的反应.钢看起来比陶瓷花瓶更闪闪发光,一个木头箱子不会像钢箱子一样对光产生很强的反射.每个物体对镜面高光也有不同的反应.有些物体不会散射(Scatter)很多光却会 ...
- 虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
最新文章
- 十大成长性人工智能技术!
- 某些插件 的一点小特性
- mysql sql demo
- Statement对象重新执行将关闭当前ResultSet
- android 数字证书具体应用机制
- webapi+ajax跨域问题及cookie设置
- windows下共享文件夹在Linux下打开
- 管理软件实施(3)——项目的生命周期
- 如何设置postfix别名邮件组只接受本域的邮件
- Activiti工作流从入门到入土:完整Hello World大比拼(Activiti工作流 API结合实例讲解)...
- IEC61850报告服务(报文解析)
- PHPMailer的使用
- java程序拦截dde漏洞问题_Office DDE漏洞学习笔记
- 华为私有云的搭建方案_私有云平台搭建物业管理系统
- matlab炮灰模型,非诚勿扰的数学分析
- Python 高阶函数,匿名函数 思维导图
- w3c离线手册2019
- C++ template调试模板(6.6节)
- python安装error: Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual解决方案
- 亚马逊AWS EC2服务器配置教程
热门文章
- 珠宝行业电子秤串口程序开发
- 百度绿萝算法更新 众多网站摊上事了
- C语言代码简化技巧(一)
- 砍价永远差一刀?拼多多法庭上回复:小数点后有6位......
- java 营业执照验证_基于Java的营业执照识别示例代码-六派数据
- CMMI 认证为什么要提前准备?评估方式是怎样的?
- 产品冷思考:大而全or小而美如何选择?
- Xcode (xip)官方原版下载 Xcode 所有历史版本
- linux中swp是什么文件,Linux中.swp 文件的产生与解决方法
- 48 Fixing relationship Problems with Humor 用幽默解决人际关系问题