【Cesium学习（五）】绘制基础形状

Cesium绘制形状

在Cesium上面绘制实体形状有两种方式：一个是通过Entity的方式来绘制，还有一种是通过CZML的JSON格式数据来绘制，下面就演示这两种方式。

第一种 Entity添加实体

首先来看看官网关于Entity的描述，如下图： 点击前往官网

可以看到，entity可以创建多种实体（立方体，圆柱体，椭圆，点，线等等），每一个实体创建的属性可以自行点击查看
在这里我演示创建（立方体，圆柱，走廊）

添加实体方法是add 官网

代码实现

话不多说，我直接上代码

// 初始化
let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
    //> 设置地图
    imageryProvider: new Cesium.UrlTemplateImageryProvider({ url }),
});
//> 绘制一个圆柱体
const blueCylinder = viewer.entities.add({
    name: 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    cylinder: {
        length: 500000.0,
        topRadius: 200000.0,
        bottomRadius: 100000.0,
        material: Cesium.Color.BLUE, //> 设置材料的颜色
    },
});
//> 绘制立方体
const 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), //>一个 Cartesian3 属性，用于指定框的长度，宽度和高度
        material: Cesium.Color.RED.withAlpha(0.5), //>指定用于填充框的材料。 withAlpha: 透明度
        outline: true, //>一个布尔型属性，指定是否对框进行概述。
        outlineColor: Cesium.Color.BLACK, //>指定轮廓的颜色
    },
});
//> 绘制一个走廊
const blueCorridor = viewer.entities.add({
    name: 'Blue extruded corridor with beveled corners and outline',
    corridor: {
        positions: Cesium.Cartesian3.fromDegreesArray([-95.0, 40.0, -100.0, 40.0, -100.0, 35.0]),
        height: 200000.0,
        extrudedHeight: 100000.0,
        width: 200000.0,
        cornerType: Cesium.CornerType.BEVELED,
        material: Cesium.Color.YELLOW.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.WHITE,
    },
});
viewer.zoomTo(viewer.entities);

这里的zoomTo就是异步设置摄像机以查看提供的一个或多个实体或数据源。

运行起来就是如下图:**

第二种 CZML添加实体

首先需要写一个czml格式的数据，CZML是一种JSON格式的字符串，用于描述与实践有关的动画场景。
这里我写一个创建广告牌的czml数据

//> 绘制一个广告牌 （采用CZML格式创建）
const czml = [
    {
        id: 'document',
        name: 'Basic CZML billboard and label',
        version: '1.0',
    },
    {
        id: 'some-unique-id',
        name: 'AGI',
        description: "<p><a href='http://www.agi.com' target='_blank'>Analytical Graphics, Inc.</a> (AGI) founded Cesium.</p>",
        billboard: {
            image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACvSURBVDhPrZDRDcMgDAU9GqN0lIzijw6SUbJJygUeNQgSqepJTyHG91LVVpwDdfxM3T9TSl1EXZvDwii471fivK73cBFFQNTT/d2KoGpfGOpSIkhUpgUMxq9DFEsWv4IXhlyCnhBFnZcFEEuYqbiUlNwWgMTdrZ3JbQFoEVG53rd8ztG9aPJMnBUQf/VFraBJeWnLS0RfjbKyLJA8FkT5seDYS1Qwyv8t0B/5C2ZmH2/eTGNNBgMmAAAAAElFTkSuQmCC',
            scale: 1.5,
        },
        label: {
            fillColor: {
                rgba: [255, 255, 255, 255],
            },
            font: '12pt Lucida Console',
            horizontalOrigin: 'LEFT',
            pixelOffset: {
                cartesian2: [8, 0],
            },
            style: 'FILL',
            text: 'AGI',
            showBackground: true,
            backgroundColor: {
                rgba: [112, 89, 57, 200],
            },
        },
        position: {
            cartesian: [1216361.4096947117, -4736253.175342511, 4081267.4865667094],
        },
    },
   ];

通过czml的方式要创建实体，就需要用到viewer的dataSources属性，来看看官网介绍

dataSources里面有add属性，可以添加，介绍如下

如上图所说，add的参数要是一个dataSources的数据源，Cesium里面的CzmlDataSource有一个load方法，可以将czml数据转换

所以最后将我们上面创造好的czml数据就可以创建实体了

//> 通过CZML来添加模型
 viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

运行大功告成