前言
成功运行 helloworld 的例子后,下面对控件、数据源等进一步说明。
鼠标
左键单击和拖拽 :沿着地球表面平移(调整相机位置)
右键单击和拖拽 :相机放大缩小(调整相机距离)
滚轮 :相机放大缩小(调整相机距离)
中间按下和拖拽 :围绕地球表面旋转相机(调整相机方向)
控件
① Geocoder : 地理位置查询定位控件,默认使用bing地图服务 ② HomeButton : 默认相机位置 ③ SceneModePicker : 3D、2D和哥伦布模式(2.5D)的切换按钮 [链接 ]
哥伦布模式:一个2.5D的透视视图,其中地图是平坦的,并且具有非零高度的对象被绘制在它上面
④ BaseLayerPicker : 选择地形、影像等图层 ⑤ NavigationHelpButton : 显示默认的相机控制提示 ⑥ Animation : 控制场景动画的播放速度. ⑦ CreditsDisplay : 展示数据版权属性。 ⑧ Timeline : 时间滚动条。 ⑨ FullscreenButton : 全屏切换。
① Geocoder
在 ①Geocoder 默认使用bing地图服务,这就意味着如果我们不提供 Cesium.Ion.defaultAccessToken,那么就无法使用搜索服务。
正常使用的时候:
④ BaseLayerPicker
1. Imagery
默认的初始化底图修改源码:./Source/Widgets/BaseLayerPicker/createDefaultImageryProviderViewModels.js
在 ④BaseLayerPicker 模块主要是Bing、Mapbox以及OpenStreetMap,以及ESRI四家地图服务。
图中框选的是可以直接使用,不需要申请token的图层。
BING Map 需要到 Cesium ion 申请 token [教程 ](操作不复杂,很快就能得到
Cesium.Ion.defaultAccessToken = '你的token';
MapBox 需要到 Account | Mapbox 申请token
Cesium.MapboxApi.defaultAccessToken = '你的token';
但迟迟加载不出 Sentinel-2 和 NASA 的 Blue Marble、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 failed loading。难道是token的问题?
再次登录 Cesium ion ,忽然灵光一现...
进入Asset Depot,找到这三个图层点击 Add
在 My Assets 里确认添加成功
这下Cesium提供的所有数据源都能加载了
<script>
Cesium.Ion.defaultAccessToken = '你的 cesium ion Token';
Cesium.MapboxApi.defaultAccessToken = '你的 Mapbox Token';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
除了加载官方提供的数据源,还可以用Cesium提供的 ProviderViewModel接口自己扩展数据源。Cesium提供了各种接口 支持各样的图层数据源。
例如添加一个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;
并且可以同时加载多个图层 ,后加载的图层将位于地球最上方,可以通过 layers.lower()或raise() 等调整图层顺序,也可以调整图层透明度等突出效果 [详情 ]。
2. Terrain
Cesium支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。我们使用Cesium World Terrain 图层(默认情况下,地球球体是WGS84 ellipsoid ),该图层由Cesium ion提供,在“My Assets”中是默认提供的。
进入 helloworld.html 后,我们漫游到 San Francisco 看看。(按住CTRL拖动
打开 Cesium World Terrain 前
打开 Cesium World Terrain 后
默认水、光数据是不显示的,我们可以进行设置
var worldTerrain = Cesium.createWorldTerrain({
requestWaterMask : true, // required for water effects
requestVertexNormals : true // required for terrain lighting
});
var viewer = new Cesium.Viewer('cesiumContainer',{terrainProvider: worldTerrain});
Cesium基于TerrainProvider请求地形的若干种方法。大多数地形提供器使用HTTP上的REST接口 来请求地形切片。地形提供器根据请求的格式和地形数据的组织方式而有所不同。CesiumJS支持以下TerrainProvider:
CesiumTerrainProvider : 支持量化网格地形切片,针对地形流进行了优化。兼容Cesium ion所服务的地形和来自[3D tiling pipeline])(/3d-tiling-pipeline/terrain/)的输出数据。
GoogleEarthEnterpriseTerrainProvider : 支持由您的Google Earth Enterprise 服务器生成的高程地图地形。
VRTheWorldTerrainProvider : 支持从VT MAK VR-TheWorld Server 服务器请求的高度地图地形图。
EllipsoidTerrainProvider :按照程序创建椭球的表面。缺乏地形的真实外观,但不从服务器请求数据。
⑦ CreditsDisplay
关闭 ⑦CreditsDisplay
viewer._cesiumWidget._creditContainer.style.display = "none";
参考
Ceisum官方教程2 -- 项目实例(workshop)
Cesium 中级教程2 - 图层
Cesium应用篇:影像服务(上)
系列
Cesium:入门教程(一)之 Hello World
Cesium:入门教程(二)之数据源加载
Cesium:入门教程(三)之视窗配置
Cesium:入门教程(四)之 Entities
Cesium:入门教程(五)之 3D Tiles
Cesium:入门教程(六)之 交互性(Interactivity)