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), //注意：颜色必须大写，即不能为bluestrokeWidth: 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), //注意：颜色必须大写，即不能为bluestrokeWidth: 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), //注意：颜色必须大写，即不能为bluestrokeWidth: 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>