Cesium系统教程

目录

前言

一、Cesium的初始化

二、加载影像

三、加载地形

四、加载3D Tiles数据

六、加载GeoJSON数据展示区块

七、加载KML数据展示POI

八、加载CZML数据展示路径

九、加载gltf文件

Cesium加载gltf文件的方法

十、Scene场景

十一、Camera相机

十二、Clock时钟

十三、Entity实体

---

前言

Cesium官网：官网链接

Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

本教程基于Cesium 1.119

最新版本下载：Downloads – Cesium

历史版本下载：https://sourceforge.net/projects/cesium.mirror/

一、Cesium的初始化

关闭左下角版权信息

viewer._cesiumWidget._creditContainer.style.display = "none"; 

二、加载影像

Cesium中数据加载包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等，ESRL、超图、中地数码等大型 GIS 厂商提供的自定义格式的 GIS数据，以及 GeoJSON、TIFF、SHP、KML、点云、三维模型等各种格式的 GIS 数据。

Cesium 提供了 BingMapsImageryProvider 类来加载 Bing地图，并且默认加载了微软公司的 Bing 地图。也就是说,在创建 Vewer 时，如果不指定ImageryProvider 类,就默认加载 Bing地图。

在加载 Bing地图时，需要申请 Bing地图密钥或者申请Cesium的token，否则可能会出现加载完成后没有地图出现的情况。

        const viewer = new Cesium.Viewer("cesiumContainer", {
            imageryLayers: new Cesium.ArcGisMapServerImageryProvider({
                //加载ArcGIS 在线地图
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            }),
        });

三、加载地形

使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体

注意：如果是html页面中，script类型请使用 module。

四、加载3D Tiles数据

Cesium目前支持两种模型方案，一个是使用3D tiles， 另一个是加载glTF模型，3D tiles是适用于展示大区域面积的建筑模型，而glTF模型是加载单个独立模型。

3D Tiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。

加载cesium提供的通用3D建筑

首先要到cesium的个人中心，资源仓库中添加Cesium OSM Buildings到自己的资源中，这种资源的建筑没有高度。

        const tileset = viewer.scene.primitives.add(
            await Cesium.Cesium3DTileset.fromIonAssetId(96188),
        );
        
        //移动视角到陆家嘴
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 3000),
            orientation: {
                heading: 0,
                pitch: -90,
                roll: 0
            }
        })

未加载模型前： 

 加载模型后：

添加有高度的建筑

纽约3D建筑

到cesium的个人中心，资源仓库中添加New York City 3D Buildings到自己的资源中

const tileset = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343),
 );

//移动视角到纽约，像上方一样，设置视角，也可以直接这么做
viewer.zoomTo(tileset)

结果如下： 

根据高度设置建筑颜色

高度的顺序，因为我们用的是大于号一定要从大到小，反之则是从小到大

        tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ['${Height} >= 300', 'rgba(45,0,75,0.6)'],
                    ['${Height} >= 200', 'rgba(102,71,151, 1)'],
                    ['${Height} >= 100', 'rgba(170,62,204, 1)'],
                    ['${Height} >= 50', 'rgba(224,226,238, 1)'],
                    ['${Height} >= 25', 'rgba(252,230,200, 1)'],
                    ['${Height} >= 10', 'rgba(248,176,87, 1)'],
                    ['${Height} >= 5', 'rgba(198,106,11, 1)'],
                    ['true', 'rgba(127,59,8, 1)'],
                ]
            },
            show: '${Height} >= 0&