Cesium 概述 (二) 空间数据可视化

客官°小女子只卖身不卖艺 2022-07-20 16:14 574阅读 0赞

# **                                                              空间数据可视化** #

Cesium提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状（volume）。

Entity API简介

Cesium提供两类API：

1.  （1）面向图形开发人员的底层API，通常称为“Primitive API”。该API暴露最小限度的抽象，使用图形学术语，具有很大的灵活性，需要具有图形学编程的知识
2.  （2）高级别的数据驱动的API，称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象，其底层使用Primitive API

下面是Entity API的简单例子，用红色半透明区域标记出美国怀俄明州：

var viewer = new Cesium.Viewer('cesiumContainer'); //创建一个查看器（Viewer widget）
    var wyoming = viewer.entities.add({  //添加一个实体，仅需要传递一个简单JSON对象，返回值是一个Entity对象
      name : 'Wyoming',
      polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([//一组地理坐标
                                  -109.080842,45.002073,
                                  -105.91517,45.002073,
                                  -104.058488,44.996596,
                                  -104.053011,43.002989,
                                  -104.053011,41.003906,
                                  -105.728954,40.998429,
                                  -107.919731,41.003906,
                                  -109.04798,40.998429,
                                  -111.047063,40.998429,
                                  -111.047063,42.000709,
                                  -111.047063,44.476286,
                                  -111.05254,45.002073]),
        material : Cesium.Color.RED.withAlpha(0.5), //材质
        outline : true, //是否显示轮廓
        outlineColor : Cesium.Color.BLACK //轮廓的颜色
      }
    });
    viewer.zoomTo(wyoming);//缩放、平移视图使实体可见

**形状与立体（Shapes and Volumes）**

**支持的形状与立体列表**

**（1） 立方体(Boxes)：**

（2） 圆和椭圆 (Circles Ellipses)

**(3)走廊(Corridor)**

(4)圆柱和圆锥(Cylinder Cones)

var greenCylinder = viewer.entities.add({
        name : 'Green cylinder with black outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
        cylinder : { //圆柱
            length : 400000.0,
            topRadius : 200000.0,
            bottomRadius : 200000.0,
            material : Cesium.Color.GREEN,
            outline : true,
            outlineColor : Cesium.Color.DARK_GREEN
        }
    });
     
    var redCone = viewer.entities.add({
        name : 'Red cone',
        position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
        cylinder : {//圆锥
            length : 400000.0,
            topRadius : 0.0,
            bottomRadius : 200000.0,
            material : Cesium.Color.RED
        }
    });

(5)  多边形 (Polygons)

（6） 多段线 (Polylines)

（7） 多段线体 (Polyline Volumes)

（8） 矩形(Rectangles)

<strong>//红色矩形
    var redRectangle = viewer.entities.add({
        name : 'Red translucent rectangle with outline',
        rectangle : {
            coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
            material : Cesium.Color.RED.withAlpha(0.5),
            outline : true,
            outlineColor : Cesium.Color.RED
        }
    });
    //绿色旋转、拉伸的矩形
    var greenRectangle = viewer.entities.add({
        name : 'Green translucent, rotated, and extruded rectangle',
        rectangle : {
            coordinates : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
            material : Cesium.Color.GREEN.withAlpha(0.5),
            rotation : Cesium.Math.toRadians(45),
            extrudedHeight : 300000.0,
            height : 100000.0,
            outline : true,
            outlineColor : Cesium.Color.GREEN
        }
    });</strong>

**（9）球和椭球(Spheres Ellipsoids)**

<pre name="code" class="javascript">var blueEllipsoid = viewer.entities.add({
        name : 'Blue ellipsoid',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
        ellipsoid : {
            //可以指定三个轴的半径
            radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
            material : Cesium.Color.BLUE
        }
    });
     
    var redSphere = viewer.entities.add({
        name : 'Red sphere with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        ellipsoid : {
            //正球体
            radii : new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
            material : Cesium.Color.RED,
            outline : true,
            outlineColor : Cesium.Color.BLACK
        }
    });
     
    var outlineOnly = viewer.entities.add({
        name : 'Yellow ellipsoid outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
        ellipsoid : {
            radii : new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
            fill : false,
            outline : true,
            outlineColor : Cesium.Color.YELLOW,
            slicePartitions : 24, //横向切割线
            stackPartitions : 36  //纵向切割线
        }
    });

(10) 墙(Walls)

//东西方向的横墙
    var redWall = viewer.entities.add({
        name : 'Red wall at height',
        wall : {
            positions : Cesium.Cartesian3.fromDegreesArrayHeights(
                 [-115.0, 44.0, 200000.0,//坐标点
                  -90.0, 44.0, 200000.0]
            ),
            minimumHeights : [100000.0, 100000.0], //按坐标点的最小高度数组
            material : Cesium.Color.RED
        }
    });
    //四边围墙
    var greenWall = viewer.entities.add({
        name : 'Green wall from surface with outline',
        wall : {
            positions : Cesium.Cartesian3.fromDegreesArrayHeights(
                [-107.0, 43.0, 100000.0,
                 -97.0, 43.0, 100000.0,
                 -97.0, 40.0, 100000.0,
                 -107.0, 40.0, 100000.0,
                 -107.0, 43.0, 100000.0]),
            material : Cesium.Color.GREEN,
            outline : true,
            outlineColor : Cesium.Color.BLACK
        }
    });
    //曲折的墙
    var blueWall = viewer.entities.add({
        name : 'Blue wall with sawtooth heights and outline',
        wall : {
            //坐标点，不指定高度
            positions : Cesium.Cartesian3.fromDegreesArray(
                [-115.0, 50.0,
                 -112.5, 50.0,
                 -110.0, 50.0,
                 -107.5, 50.0,
                 -105.0, 50.0,
                 -102.5, 50.0,
                 -100.0, 50.0,
                 -97.5, 50.0,
                 -95.0, 50.0,
                 -92.5, 50.0,
                 -90.0, 50.0]),
            maximumHeights : [ //上高
                100000, 200000, 100000, 200000, 100000, 200000, 
                100000, 200000, 100000, 200000, 100000],
            minimumHeights : [  //下高
                0, 100000,  0, 100000, 0, 100000, 0, 100000, 0,
                100000, 0],
            material : Cesium.Color.BLUE,
            outline : true,
            outlineColor : Cesium.Color.BLACK
        }
    });

材质（Material）与轮廓（Outline）

多数形状均支持通过一致的方式来设置属性、控制外观：

1.  （1）fill：布尔型，用于指定目标形状是否被填充
2.  （2）outline：布尔型，用于指定是否绘制形状的边缘
3.  （3）material：如果fill为true，该属性可以控制填充的材质类型

一个例外是多段线，可以设置outlineWidth 、outlineColor、glowPower 等属性。

高度与拉伸（Extrusion）

所有的形状均默认均是沿着地表的，目前圆形、椭圆、矩形可以在一定高度浮空显示，或者拉伸为Volume。

需要注意：Cesium总是使用米、弧度、秒为度量单位。下面是一个例子：

wyoming.polygon.height = 200000;         //设置高度
    wyoming.polygon.extrudedHeight = 250000; //设置拉伸高度

在Viewer中可用的Entity特性

除非显式禁用，点击实体后会显示SelectionIndicator小器件，以及一个信息框。通过设置Entity.description，可以在信息框中显示任何HTML内容。

镜头控制

zoomTo方法可以立即定位到某个位置，而flyTo则是通过动画方式转移到某个位置，这两个方法均可以传递EntityCollection对象，并且均是异步方法，返回一个Promises对象

默认情况下，镜头是朝北、45度倾斜查看地球。下面的代码可以让镜头朝东、倾斜三十度查看：

//镜头顺时针旋转九十度，即东向
    var heading = Cesium.Math.toRadians(90);
    //镜头倾斜30度俯视
    var pitch = Cesium.Math.toRadians(-30);
    viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch)).then(function(result){
        //执行完毕后，进行的动作
        if (result) { //如果镜头切换成功，则result=true
            viewer.selectedEntity = wyoming;
        }
    });

有时需要镜头跟踪某个实体（使居中）而不是地球，可以使用如下代码：

wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
    viewer.trackedEntity = wyoming;  //跟踪某个实体。如果调用zoomTo、flyTo自动取消跟踪

管理Entity

EntityCollection对象是一个从Entity Id到Entity的关联数组，其提供例如add、remove、removeAll之类的常规函数，用于添加或者删除某个Entity：

//添加一个实体，并且提供ID
    viewer.entities.add({
      id : '182bdba4-2b3e-47ae-bf0b-83f6fde285fd'
    });
    //获取一个实体
    var entity = viewer.entities.getById('uniqueId')
    //获取一个实体，如果不存在则创建之
    var entity = viewer.entities.getOrCreateEntity('uniqueId');
     
    //当添加、删除、修改EntityCollection中的Entity时，可以获得事件通知
    function onChanged(collection, added, removed, changed){
        //add、removed、changed是增删改的Entity数组
        for(var i = 0; i < added.length; i++) {
            
        }
    }
    viewer.entities.collectionChanged.addEventListener(onChanged);
     
    //大批量操作时，临时禁用事件可以提高性能
    viewer.entities.suspendEvents();
    //执行各种Entity操作
    viewer.entities.resumeEvents();

点、图标和标签

添加一个点、标签或者图标很简单：

3D模型

Cesium支持glTF格式的3D模型，glTF是WebGL、 OpenGL ES、 OpenGL的一种运行时模型格式，在Cesium中创建3D模型很简单：

var viewer = new Cesium.Viewer('cesiumContainer');
    var entity = viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
        model : {
            uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
        },
        scale : 1,//和原始大小相比的缩放比例
        minimumPixelSize :100 //最小尺寸，防止太小而看不见
    });
    viewer.trackedEntity = entity;

默认情况下，模型竖直放置、并且面向东面。可以指定四元组（Quaternion）给Entity.orientation属性，以改变放置的方向：

var viewer = new Cesium.Viewer('cesiumContainer');
    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706); //位置
    var heading = Cesium.Math.toRadians(45.0);//绕垂直于地心的轴旋转
    var pitch = Cesium.Math.toRadians(15.0);  //绕纬度线旋转
    var roll = Cesium.Math.toRadians(0.0);    //绕经度线旋转
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
     
    var entity = viewer.entities.add({
        position : position,
        orientation : orientation,
        model : {
            uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
        }
    });
    viewer.trackedEntity = entity;

例子中的 heading（yaw）、pitch、roll 对应了绕 Z（垂直轴）、Y（维度方向）、X（经度方向） 进行旋转，正数表示顺时针旋转（由于相对运动，在浏览器上看起来是地球在逆时针旋转），可以参考下图理解（人面向北面，摇头heading、点头pitch、歪头roll）：

![Image 1][]

属性系统

Cesium提供了一些快捷方式来设置属性，例如outline:true，但是尝试使用e.polygon.outline这样的形式来获取轮廓时，会得到一个ConstantProperty对象，如果不使用快捷方式，则需要编写更多的代码，例如：

polygon.outline = new Cesium.ConstantProperty(true);
    polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);

所有属性的实例均是Property的子类型，引入属性类层次而不是使用基本类型的原因是，某些属性是随着时间而变化的。

要得到属性的原始值，需要调用Property.getValue()方法，例如：

//获取当前时间点，多边形轮廓是否存在
    polygon.outline.getValue(viewer.clock.currentTime)

[Image 1]: