描述Viewer
Viewer是地图可视化展示的主窗口,Cesium 程序应用的切入口,是 Cesium 中的核心类,开发中我们常用来初始化地图,控制图层的添加、删除等,是较为频繁调用的API
创建 Viewer
new Cesium.Viewer(container, options);
第一个参数:地图容器的 id
第二个参数:初始化地图选项
let viewer = new Cesium.Viewer('myMap', {
selectionIndicator: false, // 是否显示选中地图元素标识控件
animation: false, // 是否显示动画控件
baseLayerPicker: false, // 是否显示图层选择控件
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
sceneModePicker: false, // 是否显示投影方式控件
navigationHelpButton: false, // 是否显示帮助信息控件
infoBox: false, // 是否显示点击要素之后显示的信息
homeButton: false, // 是否显示主页控件
fullscreenButton: false // 是否显示全屏控件
})
-
selectionIndicator 是否显示选中地图元素标识控件,默认为 true
-
animation 是否显示动画控件,默认为 true
- baseLayerPicker 是否显示图层选择控件,默认为 true
- geocoder 是否显示地名查找控件,默认为 true
- timeline 是否显示时间线控件,默认为 true
- sceneModePicker 是否显示投影方式控件,默认为 true
- navigationHelpButton 是否显示帮助信息控件,默认为 true
- infoBox 是否显示点击要素之后显示的信息,默认为 true
- homeButton 是否显示主页控件,默认为 true
- fullscreenButton 是否显示全屏控件,默认为 true
- 版权信息
Viewer - camera 控制
相机是 viewer.scene 中的属性,用来控制当前可见的视角区域。我们可以通过直接设置它的位置和方向来控制相机
一些常用的方法:
Camera.setView(options):在特定位置和方向立即设置相机
Camera.zoomIn(amount):沿着视角矢量移动摄像机
Camera.zoomOut(amount)]:沿视角矢量向后移动摄像机
Camera.flyTo(options):创建从当前相机位置到新位置的动画相机飞行
Camera.lookAt(target, offset):定位并定位摄像机以给定偏移量瞄准目标点
Camera.move(direction, amount):朝任何方向移动摄像机
Camera.rotate(axis, angle):绕任意轴旋转相机
heading,pitch,roll
Heading 是高度
Pitch 是围绕Y轴旋转
Roll 是围绕X轴旋转
setView
Cartesian3 3D笛卡尔坐标
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-85.16, 13.71, 23000000.0),
orientation: {
heading : Cesium.Math.toRadians(20.0), // 方向
pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
roll : 0
}
});
Cartographic 由经度,纬度和高度定义的位置
camera.setView( {
positionCartographic : new Cesium.Cartographic( longitude, latitude, height),
heading : headingAngle,
pitch : pitchAngle,
roll : rollAngle
} );
Rectangle 指定为经度和纬度坐标的二维区域
viewer.camera.setView({
destination: : Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),
orientation: {
heading : Cesium.Math.toRadians(20.0), // 方向
pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
roll : 0
}
});
flyTo
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.435314, 39.960521, 15000.0),
orientation: {
heading : Cesium.Math.toRadians(20.0), // 方向
pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
roll : 0
}
duration: 2, // 设置飞行持续时间,默认会根据距离来计算
maximumHeight:5000 // 相机最大飞行高度
easingFunction: _Cesium2.default.EasingFunction.LINEAR_NONE,
flyOverLongitude:100 // 如果到达目的地有2种方式,设置具体值后会强制选择方向飞过这个经度(这个,很好用)
complete: function complete() {
var z = (view.z || 90000) * 1.2 + 8000;// 到达位置后执行的回调函数
}
});
viewer - imageryLayers 图层
// 加载 WMTS 服务
var WMTSserve = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS/tile/1.0.0/USGSShadedReliefOnly/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg',
layer: 'USGSShadedReliefOnly', // 请求的层名称
style: 'default', // 请求的样式名称
format: 'image/jpeg', // 要从服务器检索的图像的MIME类型
tileMatrixSetID: 'default028mm', // 用于WMTS请求的TileMatrixSet的标识符
maximumLevel: 19, // 图像提供者支持的最大详细程度
credit: new Cesium.Credit('U. S. Geological Survey') // 数据源的信用,显示在画布上
});
viewer.imageryLayers.addImageryProvider(WMTSserve);
图像数据太大,无法放入内存,甚至无法放入单个磁盘,因此图像被划分为较小的图像,称为tiles(瓦片),可以根据视图将图像流传输到客户端
-
Web Map Service (
WMS) - OGC标准,用于从分布式地理空间数据库中请求地理区域的地图块 -
Tile Map Service (
TMS) - 访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles -
OpenGIS Web Map Tile Service (
WMTS) - 一个OGC标准,用于在互联网上提供预先绘制的地理参考瓦片图。在Cesium中 -
OpenStreetMap - 访问
OpenStreetMap瓦片图或任何Slippy瓦片图 -
Bing Maps - 使用
Bing Maps REST Services访问瓦片图 -
Esri ArcGIS MapServer - 使用
ArcGIS Server REST API来访问ArcGIS MapServer上的瓦片图 -
Google Earth Enterprise - 提供对存储
Google Earth Enterprise服务器中的图层的访问 -
Mapbox - 使用
Mapbox API访问瓦片图. 创建一个账户并提供access token -
Standard image files - 从图片中创建图层
-
Custom tiling schemes - 使用
UrlTemplateImageryProvider,通过使用URL模板,我们可以连接到大量图像源 -
Tile coordinates - 通过绘制每个瓦片图周围的边界并用其水平、X和Y坐标标记它,显示如何在特定的瓦片方案中将地球划分为多个瓦片图