Cesium开发基础笔记总结（加载影像、加载地形数据、加载矢量）
Cesium开发基础笔记总结
学习总结于GIS李胜老师博客
Cesium开发基础01加载影像数据
加载影像数据
Cesium中的影像图层类：
无论是二维地图还是三维地图，如果缺少了底图影像或电子地图，都是不完整的。**Cesium为我们提供了ImageryLayerCollection、ImageryLayer以及相关的ImageryProvider类来加载不同的影像图层。*虽然Cesium把此类图层叫做Imagery，但并不是特指卫星影像数据，还包括一些互联网地图、TMS、WMS、WMTS、单个图片等。
ImageryLayer类：
Cesium.ImageryLayer类用于表示Cesium中的影像图层。
它就相当于皮毛、衣服，将数据源包裹在内，它需要数据源（imageryProvider）为其提供内在丰富的地理空间信息和属性信息。
同时，通过该类还能设置影像图层相关属性，比如透明度、亮度、对比度、色调等。
ImageryProvider类：
Cesium.ImageryProvider类及其子类封装了加载各种影像图层的方法，其中Cesium.ImageryProvider类是抽象类、基类或者可将其理解为接口，它不能被直接实例化。提供要显示在椭球表面上的图像。此类型描述了接口，不能直接实例化。
我们可以把ImageryProvider看作是影像图层的数据源（包裹在ImageryLayer类内部），我们想使用哪种影像图层数据或服务就用对应的ImageryProvider子类去加载。
目前Cesium提供了以下15种ImageryProvider：
ArcGisMapServerImageryProvider
BingMapsImageryProvider
OpenStreetMapImageryProvider
TileMapServiceImageryProvider
GoogleEarthEnterpriseImageryProvider
GoogleEarthEnterpriseMapsProvider
GridImageryProvider
IonImageryProvider
MapboxImageryProvider
MapboxStyleImageryProvider
SingleTileImageryProvider
TileCoordinatesImageryProvider
UrlTemplateImageryProvider
WebMapServiceImageryProvider
WebMapTileServiceImageryProvider
ImageryLayerCollection类：
Cesium.ImageryLayerCollection类是ImageryLayer类对象的容器，它可以装载、放置多个ImageryLayer或ImageryProvider类对象，而且它内部放置的ImageryLayer或ImageryProvider类对象是有序的。
Cesium.Viewer类对象中包含的imageryLayers属性就是ImageryLayerCollection类的实例，它包含了当前Cesium应用程序所有的ImageryLayer类对象。
Cesium加载不同类型的影像图层
根据上面提供的Provider可知道，目前Cesium支持15种类型的影像图层。
这里主要介绍以下几个：
ArcGisMapServerImageryProvider：
Cesium提供了ArcGisMapServerImageryProvider，可以方便的加载ArcGIS online和Server上的数据。
首先获取该影像服务的地址，下面以ESRI_Imagery_World_2D为例，WGS1984坐标系，全球范围，只需要指定url，就可以在Cesium下快速加载该服务。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false, //备注：在不通过控件指定影像服务时，需要指定baseLayerPicker为false，否则会报错。
});
const imageryLayers = viewer.scene.imageryLayers;
var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
url:"http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer",
});
imageryLayers.addImageryProvider(arcgisProvider);
</script>
</body>
</html>
BingMapsImageryProvider：
Bing地图影像，可以指定mapStyle，详见BingMapsStyle类。
Cesium中提供了BingMapsImageryProvider。使用方式和ArcGIS一样简单，代码如下：
需要Bing地图的free Basic Key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var bingStyle = [
Cesium.BingMapsStyle.AERIAL_WITH_LABELS,
Cesium.BingMapsStyle.COLLINS_BART,
Cesium.BingMapsStyle.CANVAS_GRAY,
Cesium.BingMapsStyle.CANVAS_LIGHT,
Cesium.BingMapsStyle.CANVAS_DARK,
Cesium.BingMapsStyle.ORDNANCE_SURVEY,
Cesium.BingMapsStyle.ROAD,
Cesium.BingMapsStyle.AERIAL,
];
var bingMapProvider = new Cesium.BingMapsImageryProvider({
url: "https://dev.virtualearth.net", //’'https://dev.virtualearth.net',
key: "AqM_f-xO0YW-52FSEnMmZJK__RaOgLWrvYAwbv6_BCbu6oFegBVk4LzzIxevoRHQ",
mapStyle: bingStyle[7],
});
imageryLayers.addImageryProvider(bingMapProvider);
</script>
</body>
</html>
OpenStreetMapImageryProvider：
Cesium中提供了加载OpenStreetMap的Provider，代码如下：
OSM影像服务，根据不同的url选择不同的风格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var osm = new Cesium.OpenStreetMapImageryProvider({
url: "https://a.tile.openstreetmap.org/",
minimumLevel: 0,
maximumLevel: 18,
fileExtension: "png",
});
imageryLayers.addImageryProvider(osm);
</script>
</body>
</html>
GridImageryProvider（开发调试）：
展示内部渲染网格划分情况，了解每个瓦片的精细度，便于调试地形和图像渲染问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var arcgisProvider = new Cesium.ArcGisMapServerImageryProvider({
url:"http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer",
});
imageryLayers.addImageryProvider(arcgisProvider);
var gridImagery = new Cesium.GridImageryProvider();
var gridImageryLayer = imageryLayers.addImageryProvider(gridImagery);
imageryLayers.raiseToTop(gridImageryLayer); //将图层置顶
</script>
</body>
</html>
SingleTileImageryProvider：
单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var imagelayer = new Cesium.SingleTileImageryProvider({
url: '../Apps/Sandcastle/images/earthbump1k.jpg'
})
imageryLayers.addImageryProvider(imagelayer);
</script>
</body>
</html>
TileCoordinatesImageryProvider（开发调试）：
展示内部渲染网格瓦片划分情况，包括网格瓦片等级、X、Y序号，便于调试地形和图像渲染问题。当然也可以和GridImageryProvider一起叠加使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var imagelayer = new Cesium.SingleTileImageryProvider({
url: '../Apps/Sandcastle/images/earthbump1k.jpg'
})
imageryLayers.addImageryProvider(imagelayer);
var tileCoordinates = new Cesium.TileCoordinatesImageryProvider();
var tileCoordinatesLayer = viewer.imageryLayers.addImageryProvider(tileCoordinates);
imageryLayers.raiseToTop(tileCoordinatesLayer); //将图层置顶
</script>
</body>
</html>
UrlTemplateImageryProvider：
指定url的format模版，方便用户实现自己的Provider.比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。而OSM也是通过该类实现的，以下是使用XYZ方式加载上面加载过的OSM影像服务。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
const osmImageryProvider = new Cesium.UrlTemplateImageryProvider({
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"],
});
imageryLayers.addImageryProvider(osmImageryProvider);
</script>
</body>
</html>
WebMapTileServiceImageryProvider：
服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图。
获取天地图TK
获取Cesium Access Tokens
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
var cesiumAsset= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWJkZDkxYS0yNTg3LTQxNzktYmY2MC1iZTRiN2M4ZjcxMjMiLCJpZCI6Njg0NDAsImlhdCI6MTYzMjU3OTQwOX0.5FzD9jZYCHbOziDOF3VNG5ErOhP3TzPaCZHZudmU5zg";
var tiandituTk='9b8b9b2f9280bb14599a178b89973ffa';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = cesiumAsset;
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var tdt_base = new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
});
var tdt_legend = new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
})
imageryLayers.addImageryProvider(tdt_base);
imageryLayers.addImageryProvider(tdt_legend);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
</script>
</body>
</html>
Cesium开发基础02加载地形数据
Cesium中的地形图层类
Cesium提供了TerrainProvider基类，该Provider负责每一个Tile对应的地形数据的构建，定义了一套地形Provider需要实现的接口和规范，但本身并不会参与其中的操作。
基于此类，cesium为我们封装了5个现成的继承类操作地形数据：
ArcGISTiledElevationTerrainProvider
EllipsoidTerrainProvider
CesiumTerrainProvider
VRTheWorldTerrainProvider
GoogleEarthEnterpriseTerrainProvider
terrainProvider不像上一讲介绍的影像图层（有专门的ImageryLayer）那样，Cesium中的地形类是直接通过不同的terrainProvider控制的，然后把某一个实例化的terrainProvider赋值给Viewer.terrainProvider来控制地形数据的显隐。所以Cesium中的地形图层只能有一个。
Cesium加载不同的地形数据
Cesium支持两种类型的地形，STK World Terrain和Small Terrain。
下面我们主要介绍Cesium中常用的2个terrainProvider：
ArcGISTiledElevationTerrainProvider：
ArcGIS的地形，这个可以说是一个真实的（凹凸的）高度图，原理和EllipsoidTerrainProvider如出一辙，因此同样的不支持法线，水面，但可以选择TileScheme，与EllipsoidTerrainProvider不一样之处在于每一个切片会根据ArcGIS规范请求一张图片，该图片中的像素对应的值就是该像素对应的高度，真的是名副其实的高度图。
var terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
url:
"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
token:
"KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",
});
viewer.terrainProvider = terrainProvider;
CesiumTerrainProvider：
Cesium标准地形，在该Provider中支持两种地形格式，一种是高度图（目前Cesium已经废弃 ），另一种则是TIN网格的STK地形。
Cesium厉害的之处就在于目前采用STK的地形服务，并通过QuantizedMeshTerrainData封装了STK地形数据格式，它的优点是支持水面和法线，同时数据量比较小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
var cesiumAsset= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWJkZDkxYS0yNTg3LTQxNzktYmY2MC1iZTRiN2M4ZjcxMjMiLCJpZCI6Njg0NDAsImlhdCI6MTYzMjU3OTQwOX0.5FzD9jZYCHbOziDOF3VNG5ErOhP3TzPaCZHZudmU5zg";
var tiandituTk='9b8b9b2f9280bb14599a178b89973ffa';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = cesiumAsset;
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
//天地图底图影像
var tdt_base = new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
});
var tdt_legend = new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
})
imageryLayers.addImageryProvider(tdt_base);
imageryLayers.addImageryProvider(tdt_legend);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
//添加Cesium地形图
var terrainProvider = new Cesium.CesiumTerrainProvider({
url :Cesium.IonResource.fromAssetId(1),
requestWaterMask: true, // 请求水体效果所需要的海岸线数据
requestVertexNormals: true, // 请求地形照明数据
});
viewer.terrainProvider = terrainProvider;
</script>
</body>
</html>
Cesium开发基础03加载矢量数据
加载矢量数据
一个shapfile必须包含的文件：
主文件（.shp）：存储地理要素的几何信息
索引文件（.shx）：存储要素几何图形的索引信息
dBase表文件（*.dbf）：存储地理要素的属性信息（非几何信息）
除此之外还有可选的文件：
空间参考文件（.prj）：存储空间参考信息，即地理坐标系统信息和投影坐标系统信息，使用well-known文本格式（WKT）进行描述。
几何体的空间索引文件（.sbn 和 .sbx）、只读的Shapefiles的几何体的空间索引文件（.fbn 和.fbx）等等。
shapfile如此强大和受欢迎，只可惜Cesium却不能直接加载shp文件，如果想加载shp文件，感兴趣的可以参考这位大牛封装的库CesiumVectorTile。Cesium直接支持的矢量数据格式包括：geojson、topojson、kml以及具有时间特性的czml，并以DataSouce后缀去命名相关的类。
dataSources:DataSourceCollection：
CustomDataSource
CzmlDataSource
GeoJsonDataSource
KmlDataSource
Cesium加载geojson文件：
GeoJSON是用于描述地理空间信息的数据格式，它不是一种新的格式，其语法规范是符合JSON格式的，只不过对其名称进行了规范，专门用于表示地理信息。
GeoJSON的最外层是一个单独的对象（object）。这个对象可表示：
① 几何体（Geometry）；
② 特征（Feature）；
③ 特征集合（FeatureCollection）；
最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type 属性，表示对象的类型，其type 的值可以是：Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection、Feature、FeatureCollection。下面是一个GeoJSON特征集合示例：
China.json的下载地址：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
var cesiumAsset= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWJkZDkxYS0yNTg3LTQxNzktYmY2MC1iZTRiN2M4ZjcxMjMiLCJpZCI6Njg0NDAsImlhdCI6MTYzMjU3OTQwOX0.5FzD9jZYCHbOziDOF3VNG5ErOhP3TzPaCZHZudmU5zg";
var tiandituTk='9b8b9b2f9280bb14599a178b89973ffa';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = cesiumAsset;
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var tdt_base = new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
});
var tdt_legend = new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
})
imageryLayers.addImageryProvider(tdt_base);
imageryLayers.addImageryProvider(tdt_legend);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
//添加Cesium地形图
var terrainProvider = new Cesium.CesiumTerrainProvider({
url :Cesium.IonResource.fromAssetId(1),
requestWaterMask: true, // 请求水体效果所需要的海岸线数据
requestVertexNormals: true, // 请求地形照明数据
});
viewer.terrainProvider = terrainProvider;
// 添加geojson数据
const jsonChina = Cesium.GeoJsonDataSource.load("./China.json",{
stroke: Cesium.Color.WHITE,
fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
strokeWidth: 5,
});
viewer.dataSources.add(jsonChina)
</script>
</body>
</html>
TopoJSON介绍：
TopoJSON是 GeoJSON 按拓扑学编码后的扩展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用Polygon、Point之类的几何体来表示图形的方法，TopoJSON中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的。对比简易图如下：
TopoJSON使用坐标（点）、弧（线、多边形）来表示地理图形，它由transform、objects和arcs三部分组成。transform描述了变换参数；objects描述地理实体包含空间及属性信息；arcs描述了有向弧的空间关系，弧由一系列起点及相对于起点的有向偏移坐标表示。基于这种弧的存储方式可以表达出拓扑关系，由于弧只记录一次及地理坐标使用整数，不使用浮点数，相对于GeoJSON，TopoJSON 消除了冗余，文件大小缩小了 80%。
在线工具推荐：
JSON在线解析及格式化： https://www.json.cn/
在线生成 GeoJSON： http://geojson.io/
shp数据转 GeoJSON 和 TopoJSON： http://mapshaper.org/
GeoJson和TopopJson在线转换： http://jeffpaine.github.io/geojson-topojson/
Cesium加载kml文件：
KML介绍
KML (keyhole markup language)是一种基于XML语法格式的文件，用来描述和存储地理信息数据（点、线、面、多边形、多面体以及模型等），通常应用于 Google 地球相关软件中（Google Earth，Google Map 等），它跟XML文件最大的不同就是KML描述的是地理信息数据，同时KML已正式被OGC采用，成为OGC众多规范中的一个。KML文件有两个文件扩展名：.KML 和.KMZ（一个或几个 KML 文件的压缩集，采用 zip 格式压缩）。Cesium从1.7版开始就支持KML，目前对KML的支持还不完整，但是支持大量的标准以及Google的gx扩展名称空间。
添加Kml示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
var cesiumAsset= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWJkZDkxYS0yNTg3LTQxNzktYmY2MC1iZTRiN2M4ZjcxMjMiLCJpZCI6Njg0NDAsImlhdCI6MTYzMjU3OTQwOX0.5FzD9jZYCHbOziDOF3VNG5ErOhP3TzPaCZHZudmU5zg";
var tiandituTk='9b8b9b2f9280bb14599a178b89973ffa';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = cesiumAsset;
const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var tdt_base = new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
});
var tdt_legend = new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
})
imageryLayers.addImageryProvider(tdt_base);
imageryLayers.addImageryProvider(tdt_legend);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
//添加Cesium地形图
var terrainProvider = new Cesium.CesiumTerrainProvider({
url :Cesium.IonResource.fromAssetId(1),
requestWaterMask: true, // 请求水体效果所需要的海岸线数据
requestVertexNormals: true, // 请求地形照明数据
});
viewer.terrainProvider = terrainProvider;
// 添加geojson数据
const jsonChina = Cesium.GeoJsonDataSource.load("./China.json",{
stroke: Cesium.Color.WHITE,
fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
strokeWidth: 5,
});
viewer.dataSources.add(jsonChina)
//添加Kml文件
const showKml = Cesium.KmlDataSource.load(
"../Apps/SampleData/kml/facilities/facilities.kml",
{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
}
)
viewer.dataSources.add(showKml)
</script>
</body>
</html>
Cesium加载czml文件：
CZML是cesium中很重要的一个概念，也是一个亮点，它使得cesium很酷很炫地展示动态数据成为可能。CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型和其他的一些图形元素，并指明了这些元素如何随时间而变化。Cesium拥有一套富客户端API，通过CZML采用数据驱动的方式，不用写代码我就可以使用通用的Cesium viewer构建出丰富的场景。某种程度上说,，Cesium和CZML的关系就像Google Earth和KML的关系，两者都是用于描述其各自客户端中的场景的数据格式，并且旨在由各种各样的应用程序生成，甚至可能是手工编写的 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height : 100%;
margin: 0;
padding : 0;
overflow: hidden;
}
/* 通过CSS控制组件显隐及位置 */
/* .cesium-viewer-toolbar, *//* 右上角按钮组 */
/*.cesium-viewer-animationContainer, */ /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
var cesiumAsset= "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjOWJkZDkxYS0yNTg3LTQxNzktYmY2MC1iZTRiN2M4ZjcxMjMiLCJpZCI6Njg0NDAsImlhdCI6MTYzMjU3OTQwOX0.5FzD9jZYCHbOziDOF3VNG5ErOhP3TzPaCZHZudmU5zg";
var tiandituTk='9b8b9b2f9280bb14599a178b89973ffa';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
Cesium.Ion.defaultAccessToken = cesiumAsset;
const viewer = new Cesium.Viewer("cesiumContainer", {
animation: true, // 动画小组件
shouldAnimate: true,
infoBox: false, // If set to false, the InfoBox widget will not be created.
// baseLayerPicker: false,
});
const imageryLayers = viewer.scene.imageryLayers;
var tdt_base = new Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
});
var tdt_legend = new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+tiandituTk,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
})
imageryLayers.addImageryProvider(tdt_base);
imageryLayers.addImageryProvider(tdt_legend);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
//添加Cesium地形图
var terrainProvider = new Cesium.CesiumTerrainProvider({
url :Cesium.IonResource.fromAssetId(1),
requestWaterMask: true, // 请求水体效果所需要的海岸线数据
requestVertexNormals: true, // 请求地形照明数据
});
viewer.terrainProvider = terrainProvider;
// 添加geojson数据
const jsonChina = Cesium.GeoJsonDataSource.load("./China.json",{
stroke: Cesium.Color.WHITE,
fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
strokeWidth: 5,
});
viewer.dataSources.add(jsonChina)
//添加Kml文件
const showKml = Cesium.KmlDataSource.load(
"../Apps/SampleData/kml/facilities/facilities.kml",
{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas,
}
)
viewer.dataSources.add(showKml)
//添加CZML文件
const showCzml = Cesium.CzmlDataSource.load("../Apps/SampleData/Vehicle.czml")
viewer.dataSources.add(showCzml);
</script>
</body>
</html>