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));