Cesium:入门教程(二)之数据源加载
前言
成功运行 的例子后,下面对控件、数据源等进一步说明。
鼠标
左键单击和拖拽:沿着地球表面平移(调整相机位置)
右键单击和拖拽:相机放大缩小(调整相机距离)
滚轮:相机放大缩小(调整相机距离)
中间按下和拖拽:围绕地球表面旋转相机(调整相机方向)
控件
图源: 滑动验证页面
① : 地理位置查询定位控件,默认使用bing地图服务
② : 默认相机位置
③ : 3D、2D和哥伦布模式(2.5D)的切换按钮 [链接]
哥伦布模式:一个2.5D的透视视图,其中地图是平坦的,并且具有非零高度的对象被绘制在它上面
④ : 选择地形、影像等图层
⑤ : 显示默认的相机控制提示
⑥ : 控制场景动画的播放速度.
⑦ : 展示数据版权属性。
⑧ : 时间滚动条。
⑨ : 全屏切换。
①
在 ① 默认使用bing地图服务,这就意味着如果我们不提供 .Ion.,那么就无法使用搜索服务。
正常使用的时候:
④ 1.
默认的初始化底图修改源码:.////.js
在 ④ 模块主要是Bing、以及,以及ESRI四家地图服务。
图中框选的是可以直接使用,不需要申请token的图层。
BING Map 需要到 ion 申请 token [教程](操作不复杂,很快就能得到
Cesium.Ion.defaultAccessToken = '你的token';
需要到 | 申请token
Cesium.MapboxApi.defaultAccessToken = '你的token';
但迟迟加载不出 -2 和 NASA 的 Blue 、Earth at night
网上其他人写的加载方式几乎都是这样:
// assetId:3812 Earth at Night
// assetId:3845 Blue Marble
// assetId:3954 Sentinel-2
var viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: new Cesium.IonImageryProvider({ assetId: 3812 }),baseLayerPicker: false
});
运行后依旧没加载出来,按下F12查看:XHR 。难道是token的问题?
再次登录 ion ,忽然灵光一现...
进入Asset Depot,找到这三个图层点击 Add
在 My 里确认添加成功
这下提供的所有数据源都能加载了
除了加载官方提供的数据源,还可以用提供的 接口自己扩展数据源。提供了各种接口支持各样的图层数据源。
例如添加一个esri自定义数据源过程 [链接]
var esriMap = new Cesium.ArcGisMapServerImageryProvider({url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',enablePickFeatures:false
});//设置ProviderViewModel
var esriMapModel = new Cesium.ProviderViewModel({name:'esri Maps',iconUrl:Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),tooltip:'ArcGIS 地图服务',creationFunction:function () {return esriMap;}
});var providerViewModels = [];
providerViewModels.push(esriMapModel);var viewer = new Cesium.Viewer('cesiumContainer');
viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;
并且可以同时加载多个图层 ,后加载的图层将位于地球最上方,可以通过 .lower()或raise() 等调整图层顺序,也可以调整图层透明度等突出效果 [详情]。
2.
支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。我们使用 World 图层(默认情况下,地球球体是WGS84 ),该图层由 ion提供,在“My ”中是默认提供的。
进入 .html 后,我们漫游到San 看看。(按住CTRL拖动
打开 World 前
打开 World 后
默认水、光数据是不显示的,我们可以进行设置
var worldTerrain = Cesium.createWorldTerrain({requestWaterMask : true, // required for water effectsrequestVertexNormals : true // required for terrain lighting
});var viewer = new Cesium.Viewer('cesiumContainer',{terrainProvider: worldTerrain});
基于请求地形的若干种方法。大多数地形提供器使用HTTP上的REST接口来请求地形切片。地形提供器根据请求的格式和地形数据的组织方式而有所不同。支持以下:
⑦
关闭⑦
viewer._cesiumWidget._creditContainer.style.display = "none";
参考
官方教程2 -- 项目实例()
中级教程2 - 图层
应用篇:影像服务(上)
系列
:入门教程(一)之 Hello World
:入门教程(二)之数据源加载
:入门教程(三)之视窗配置
:入门教程(四)之
:入门教程(五)之 3D Tiles
:入门教程(六)之 交互性()