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>

在这里插入图片描述

# javascript # 前端 # 开发语言
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB全密态数据库等值查询

avatar 华为开发者空间
cover

COC云运维中心新特性解读，让智能运维更高效

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间