home > GIS > cesium >

Cesium笔记(5): Entity控件与空间数据可视化

Author：zhoulujun Date：2020-03-10 Hits：2108

Cesium提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状（volume）。可以添加点线面：point、polyline、polygon、rectangle、ellipse等平面图形，box立方体、ellipsoid球体或椭球、Walls墙、cylinder圆柱或圆锥、

Cesium提供两类API：

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

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

官方文档：https://cesium.com/docs/cesiumjs-ref-doc/Entity.html，其实和maptalks一样，可以添加点线面：point、polyline、polygon、rectangle、ellipse等平面图形，box立方体、ellipsoid球体或椭球、Walls墙、cylinder圆柱或圆锥、Corridor走廊等。API都有相关参看。

下面是Entity API的简单例子

viewer.entities.add({
    description: 'start-point',
    name: '点',
    position: Cesium.Cartesian3.fromDegrees(114, 37),
    point: {//标注点
        color: new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 1),
        pixelSize: 20
    },
    label : { //文字标签
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style : Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
        pixelOffset : new Cesium.Cartesian2( 0, -9 )   //偏移量
    }
    billboard : { //图标
        image : './yourPath/sample.png',
        width : 64,
        height : 64
    },
})
viewer.entities.add({
  description: 'background-line',
  name: '线',
  polyline: {
    width: 2,
    positions: [114, 37, 115, 37, 115, 38],
    material: new Cesium.PolylineDashMaterialProperty({
      color: new Cesium.Color(255 / 255, 249 / 255, 0, 0.5)
    })
  }
})
let polygon = viewer.entities.add({
  description: 'start-polygon',
  name: '面',
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([114, 37, 115, 37, 115, 38, 114, 38]),
    height : 0,//设置高度后，就为3D图形
    material: Cesium.Color.RED.withAlpha(0.5), //材质
    outline: true, //是否显示轮廓
    outlineColor: Cesium.Color.BLACK //轮廓的颜色
  }
})
viewer.zoomTo(wyoming)//缩放、平移视图使实体可见

这写是平面的，其实和百度、高德、mapbox maptalks等设置差不都

3D图形

通过平面图形，设置高度

直接添加3D图形

var blueBox = viewer.entities.add({
    name : 'Blue box',
     //中心的位置
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        //长宽高
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.BLUE
    }
});
 
var redBox = viewer.entities.add({
    name : 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED,
        outline : true, //显示轮廓
        outlineColor : Cesium.Color.BLACK
        outline : true, //显示轮廓
        fill : false,  //不显示填充
    }
});
//蓝色椭圆柱，旋转了角度
var blueEllipse = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
    name : 'Blue translucent, rotated, and extruded ellipse',
    ellipse : {
        semiMinorAxis : 150000.0,
        semiMajorAxis : 300000.0,
        extrudedHeight : 200000.0,  //拉伸
        rotation : Cesium.Math.toRadians(45), //旋转
        material : Cesium.Color.BLUE.withAlpha(0.7),
        outline : true
    }
});

更多的案例，参看 Cesium 概述 (二) 空间数据可视化 https://blog.csdn.net/happyduoduo1/article/details/51865811

通过CZML添加

通过CZML也可以添加几何形状，而且CZML还可以描述动画(现在先有个印象，动画以后介绍)

先来看看官网上的说明，CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化。某种程度上说, Cesium 和 CZML的关系就像 Google Earth 和 KML。

var czml = [
  { "id": "document", "name": "box", "version": "1.0" }, 
  { 
    "id": "shape2", "name": "Red box with black outline", 
    "position": { "cartographicDegrees": [-107.0, 40.0, 300000.0] }, 
    "box": { 
     "dimensions": { "cartesian": [400000.0, 300000.0, 500000.0] }, 
     "material": { "solidColor": { "color": { "rgba": [255, 0, 0, 128] } }
    }, 
    "outline": true, "outlineColor": { "rgba": [0, 0, 0, 255] }
  }
}]
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);

可以看到单个的形状和Entity的描述基本一致，只不过是使用JSON语法来描述，关于形状描述可以参考官方API，下一节列出形状的相关信息

添加3D模型

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

// 默认情况下，模型竖直放置、并且面向东面。可以指定四元组（Quaternion）给Entity.orientation属性，以改变放置的方向：
var heading = Cesium.Math.toRadians(45.0);//绕垂直于地心的轴旋转，是围绕Z轴旋转
var pitch = Cesium.Math.toRadians(15.0);  //绕纬度线旋转，是围绕Y轴旋转
var roll = Cesium.Math.toRadians(0.0);    //绕经度线旋转，围绕X轴旋转
var orientation = Cesium.Transforms.headingPitchRollQuate，rnion(position, heading, pitch, roll);
var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706); //位置,
    orientation : orientation,//不设置，默认情况下，模型竖直放置、并且面向东面
    model : {
        uri : 'Cesium1.4/Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf'
    },
    scale : 1,//和原始大小相比的缩放比例
    minimumPixelSize :100 //最小尺寸，防止太小而看不见
});
viewer.trackedEntity = entity;

模型，就需要去各种资源网站找了，我一般去3DMax 网站找素材，然后导出为glTF

3D Tiles模型旋转

var m = tileset.modelMatrix;//RotateX为旋转角度，转为弧度再参与运算
var m1 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(RotateX)); 
Cesium.Matrix4.multiplyByMatrix3(m,m1,m);//矩阵计算，赋值tileset.modelMatrix = m;

原理可以参看《三维旋转笔记:欧拉角/四元数/旋转矩阵/轴角-记忆点整理》,

材质（Material）与轮廓（Outline）

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

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

Cesium 材质相关的类为 MaterialProperty，它有以下几个子类:
– ColorMaterialProperty
– ImageMaterialProperty
– CheckerboardMaterialProperty
– StripeMaterialProperty
– GridMaterialProperty
– PolylineGlowMaterialProperty
– PolylineOutlineMaterialProperty

一个例外是多段线，可以设置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：具体参考API，

Cesium形状相关描述

类型	模样	描述
Point		entity.point - Reference Build/Documentation
Boxes		entity.box - Code example - Reference Build/Documentation
Circles and Ellipses		entity.ellipse - Code example - Reference Build/Documentation
Corridor		entity.corridor - Code example - Reference Build/Documentation
Cylinder and Cones		entity.cylinder - Code example - Reference Build/Documentation
Polygons		entity.polygon - Code example - Reference Build/Documentation
Polylines		entity.polyline - Code example - Reference Build/Documentation
Polyline Volumes		entity.polylineVolume - Code example - Reference Build/Documentation
Rectangles		entity.rectangle - Code example - Reference Build/Documentation
Spheres and Ellipsoids		entity.ellipsoid - Code example - Reference Build/Documentation
Walls		entity.wall - Code example - Reference Build/Documentation

其中，最常见的绘制多边形polygon

名称	作用
hierarchy	指定多边形层次结构,说白了就是多边形的经纬度
height	距离地表高度
heightReference	相对高度的高度
extrudedHeight	厚度
extrudedHeightReference	相对厚度
show	控制显隐
fill	是否填充
material	填充颜色
outline	是否有外边线
outlineColor	外边线颜色
outlineWidth	外边线宽度
stRotation	指定多边形纹理从北逆时针旋转的数值属性。
granularity	指定每个纬度和经度点之间的角度距离的数值属性
perPositionHeight	是否利用每个点的高度,制造幅度?
closeTop	是否关闭多边形的顶部,也就是拿掉盖子
closeBottom	是否关闭底部
shadows	阴影
distanceDisplayCondition	定义与相机的距离
classificationType	一个枚举属性，指定此多边形在地面上时是将地形、三维图块分类，还是两者都分类
arcType	线条类型，ArcType.NONE、ArcType.GEODESIC、ArcType.RHUMB
zIndex	遮盖顺序

这里需要说明一下：

GEODESIC（测地线）：最准确地表示地球表面任意两点之间的最短曲线。
GREAT_CIRCLE（大圆）：表示地球表面与通过地心的平面的相交线上任意两点之间的路径。
RHUMB_LINE（等角航线）：表示通过以极点为起点的等方位角所定义的椭球体表面上的任意两点之间的路径。等角航线在墨卡托投影中显示为直线。
NORMAL_SECTION（法截弧）：表示由椭球体表面与通过椭球体表面上两点并垂直于两点起点处椭球面的平面相交而定义的椭球面上任意两点之间的路径。因此，从 A 点到 B 点与从 B 点到 A 点的法向截面线不同。法截弧是测地线的简版，容易构建，但不是两点间的最短距离。当研究较小时，GEODESIC，显示的也是直线。

代码实例：

viewer.entities.add({
  name: "长方体",
  polygon: {
    hierarchy: {
      //通过经纬度,笛卡尔坐标系,定义多边形的四个顶点
      positions: Cesium.Cartesian3.fromDegreesArray([105, 20, 117, 20, 122, 30, 105, 30]),
      //由于挖的这个洞,是x本身的一种数组集合,所以每一个对象里,又是一个x的形式
      holes: [{ positions: Cesium.Cartesian3.fromDegreesArray([110, 23, 112, 23, 115, 27, 110, 27]) }]
    },
    //距离地表高度
    height: 10000,
    //extrudedHeight: 21000,
    outline: true,
    outlineWidth: 100,
    //fill: false,
    arcType: Cesium.ArcType.RHUMB,
    material: Cesium.Color.RED
  }
})

转载的内容源：

Cesium 概述 (二) 空间数据可视化 https://blog.csdn.net/happyduoduo1/article/details/51865811

cesium 中文网：实体entity：http://cesium.xin/wordpress/archives/110.html

cesium编程入门(八)设置材质 http://cesium.xin/wordpress/archives/108.html

cesium编程入门(五)绘制形状 https://www.cnblogs.com/huqi-code/p/8287497.html

转载本站文章《Cesium笔记(5): Entity控件与空间数据可视化》,
请注明出处：https://www.zhoulujun.cn/html/GIS/cesium/8331.html

相关热词搜索： Entity Cesium 绘制图形图形添加数据添加到地图



上一篇：Cesium笔记(4):terrainProvider地形控件STK World Terrain和Small Terrain

下一篇：Cesium笔记(6): Primitive类下的图形Geometry与外观Appearance的设置