一、圆柱绘制代码

上一篇介绍了多边形的绘制，本篇介绍圆柱的绘制，Cesium提供的cylinder类不仅仅可以绘制圆柱，还可以绘制正多边形棱柱以及锥体等，具体代码如下（别忘了使用你自己的Token，基础环境不知道怎么布置的请参考开发环境搭建），绘制的结果如下图所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><!-- Include the CesiumJS JavaScript and CSS files --><script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body><div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></div><script>// Your access token can be found at: https://cesium.com/ion/tokens.// Replace `your_access_token` with your Cesium ion access token.Cesium.Ion.defaultAccessToken = '你的Token'; //替换成你的TokenCesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.const viewer = new Cesium.Viewer('cesiumContainer', {geocoder:true,//控制右上角第一个位置的查找工具homeButton:true,//控制右上角第二个位置的home图标sceneModePicker:true,//控制右上角第三个位置的选择视角模式，2d，3dbaseLayerPicker:true,//控制右上角第四个位置的图层选择器navigationHelpButton:true,//控制右上角第五个位置的导航帮助按钮animation:false,//控制左下角的动画器件timeline:false,//控制下方时间线fullscreenButton:false,//右下角全屏按钮vrButton:false,//右下角vr按钮shouldAnimate: true,//允许动画同步infoBox : true, //不显示点击要素之后显示的信息terrainProvider: Cesium.createWorldTerrain()});viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息let cylinder_line4 = viewer.entities.add({name: "cylinder_line4",position: new Cesium.Cartesian3.fromDegrees(119.999, 30, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 20.0,bottomRadius: 20.0,material: Cesium.Color.RED,outline: true,numberOfVerticalLines: 4,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_line8_clamp_to_ground = viewer.entities.add({name: "cylinder_clamp_to_ground",position: new Cesium.Cartesian3.fromDegrees(119.999, 30, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 20.0,bottomRadius: 20.0,material: Cesium.Color.RED,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,outline: true,numberOfVerticalLines: 8,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_top0 = viewer.entities.add({name: "cylinder_top0",position: new Cesium.Cartesian3.fromDegrees(119.999, 30.001, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 0.0,bottomRadius: 20.0,material: Cesium.Color.RED,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices3 = viewer.entities.add({name: "cylinder_slices3",position: new Cesium.Cartesian3.fromDegrees(120, 30, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 20.0,bottomRadius: 20.0,material: Cesium.Color.ORANGE,outline: true,outlineWidth: 2.0,slices: 3,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices3_top0 = viewer.entities.add({name: "cylinder_slices3_top0",position: new Cesium.Cartesian3.fromDegrees(120, 30.001, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 0.0,bottomRadius: 20.0,material: Cesium.Color.ORANGE,outline: true,outlineWidth: 2.0,slices: 3,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices4 = viewer.entities.add({name: "cylinder_slices4",position: new Cesium.Cartesian3.fromDegrees(120.001, 30, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 20.0,bottomRadius: 20.0,material: Cesium.Color.YELLOW,outline: true,outlineWidth: 3.0,slices: 4,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices4_top0 = viewer.entities.add({name: "cylinder_slices4_top0",position: new Cesium.Cartesian3.fromDegrees(120.001, 30.001, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 0.0,bottomRadius: 20.0,material: Cesium.Color.YELLOW,outline: true,outlineWidth: 3.0,slices: 4,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices6 = viewer.entities.add({name: "cylinder_slices6",position: new Cesium.Cartesian3.fromDegrees(120.002, 30, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 20.0,bottomRadius: 20.0,material: new Cesium.Color(0, 1, 0, 0.5),outline: true,outlineWidth: 4.0,slices: 6,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices6_top0 = viewer.entities.add({name: "cylinder_slices6_top0",position: new Cesium.Cartesian3.fromDegrees(120.002, 30.001, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 0.0,bottomRadius: 20.0,material: new Cesium.Color(0, 1, 0, 0.5),outline: true,outlineWidth: 4.0,slices: 6,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices8 = viewer.entities.add({name: "cylinder_slices8",position: new Cesium.Cartesian3.fromDegrees(120.003, 30, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 20.0,bottomRadius: 20.0,material: new Cesium.Color(0, 0, 1, 1.0),outline: true,outlineColor: Cesium.Color.WHITE,outlineWidth: 5.0,slices: 8,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})let cylinder_slices8_top0 = viewer.entities.add({name: "cylinder_slices8_top0",position: new Cesium.Cartesian3.fromDegrees(120.003, 30.001, 200), // 点的经纬度坐标cylinder: {length: 100,topRadius: 0.0,bottomRadius: 20.0,material: new Cesium.Color(0, 0, 1, 1.0),outline: true,outlineColor: Cesium.Color.WHITE,outlineWidth: 5.0,slices: 8,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000.0)},})viewer.flyTo(viewer.entities);</script>
</body>
</html>

二、图解参数

2.1 name

cylinder的名称，在鼠标点击点弹出的infoBox中会显示该名称。

2.2 position

圆柱中心点的坐标（注意是中心点），默认是地心坐标系，可使用我们更熟悉的经纬度来表示，转换方法是 new Cesium.Cartesian3.fromDegrees(经度，纬度，高程)

2.3 cylinder

圆柱的绘制参数

2.3.1 show

是否显示，true为显示，false为不显示，默认为显示

2.3.2 length

圆柱的高度，单位为米，可根据position的高程来换算圆柱的顶底高程，如假设高程为200，length为100，则顶底高程分别为250、150（200为圆柱中心点）

2.3.3 topRadius

圆柱的顶面半径，单位为米，可配合bottomRadius来控制圆柱的形状，当两者一直时是顶底相同的柱体，否则为不同的柱体

2.3.4 bottomRadius

圆柱的底面半径，单位为米，可配合topRadius来控制圆柱的形状，当两者一直时是顶底相同的柱体，否则为不同的柱体

2.3.5 heightReference

柱体的高程参考面，默认值为Cesium.HeightReference.NONE，表示使用绝对高程，如果想要柱体贴在地表，可设置为Cesium.HeightReference.CLAMP_TO_GROUND，上图中左侧的两个红色圆柱分别为贴地与不贴地的效果

2.3.6 material

圆柱的样式，颜色也是其中的一种，目前可以先把这个参数当作设置颜色用，默认为白色，上图中不同柱体的颜色就通过该参数设置。有些颜色Cesium直接提供了，如红色为Cesium.Color.RED；我们也可以使用RGBA的格式（A表示透明度），如红色可用new Cesium.Color(1, 0, 0, 1)表示（rgb的取值为0-1，如果是0-255的可以除以255进行归一化），上图中带有透明度的绿色对应的值为new Cesium.Color(0, 1, 0, 0.5)

2.3.7 outline

是否显示柱体的边框，true为显示，false为不显示，默认为显示

2.3.8 outlineColor

柱体边框的颜色，默认为黑色，值的格式同material，上图中右侧的白色边框就是由该参数设置得到

2.3.9 outlineWidth

柱体边框的宽度，默认为1，此参数我修改后不起作用，原因还未搞清楚

2.3.10 numberOfVerticalLines

柱体边框垂向线的数量，默认为16，上图中上下两个红色的圆柱的线数量分别为4和8

2.3.11 slices

顶底面正多边形的边数，默认为128，数量越大，越近似为圆，我们可利用该参数来绘制正多边形的柱体，如上图中的三棱柱、四棱柱、六棱柱、八棱柱等

2.3.12 distanceDisplayCondition

柱体在该视角距离内可见，其他距离不可见，默认为空，即一直可见。如new Cesium.DistanceDisplayCondition(100.0, 2000.0)表示在视角离柱体的距离为100到2000之间时可看到该柱体，其他距离不显示该柱体，这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能

Cesium学习五：使用entity绘制cylinder相关推荐

Cesium学习三：使用entity绘制polyline
一.线绘制代码上一篇介绍了点的绘制,本篇介绍线的绘制,具体代码如下(别忘了使用你自己的Token,基础环境不知道怎么布置的请参考开发环境搭建),绘制的结果如下图所示. <!DOCTYPE ht ...
cesium学习之 Entity 画卫星轨道（一）
cesium学习之 Entity 画卫星轨道 (一) 最近公司想做个卫星轨迹展示大屏,原型图看上去确实比较逼真,然后我就惨了,开始学习cesium,满满的English文档,看着头大. B站上面有入 ...
Cesium学习笔记（五）：3D 模型（http://blog.csdn.net/umgsoil/article/details/74572877）
Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加还记得我们在实体添加的时候添 ...
Cesium学习系列汇总
内容比较多,完整看完需要大概10分钟,废话不多说,撸起袖子,加油干!!! 1.前言按照套路,先介绍一下什么是Cesium. Cesium ['siːzɪəm]是JavaScript开源库,通过Ces ...
Cesium学习笔记
Cesium简介 Cesium是一个基于JavaScript的开源框架,可用于在浏览器中绘制3D的地球,并在其上绘制地图(支持多种格式的瓦片服务),该框架不需要任何插件支持,但是浏览器必须支持WebG ...
第六章 Cesium学习入门之添加Geojson数据（dataSource）
从0开始的Cesium 第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏第三章 Cesium学习入门之地 ...
OpenCV与图像处理学习五——图像滤波与增强：线性、非线性滤波、直方图均衡化与Gamma变换
OpenCV与图像处理学习五--图像滤波与增强:线性.非线性滤波.直方图均衡化与Gamma变换三.图像滤波与增强 3.1 线性滤波 3.1.1 方框滤波 3.1.2 均值滤波 3.1.3 高斯滤波 ...
cesium态势标绘（绘制矩形）
cesium态势标绘 ( 绘制矩形)标绘与编辑 vue + cesium矩形标绘与编辑,采用es6模块化写法逻辑清晰,会有明显的标注说明,使代码容易读懂,理解和学习 1.新建DrawRectangle ...
【TikZ 简单学习(下)：基础绘制】Latex下的绘图宏包
[TikZ 简单学习[下]:基础绘制]Latex下的绘图宏包上文绘制多个节点给节点添加统一样式给节点命名使用相对位置绘制给节点标签链接边的绘制在线边上添加标签绘制蛇形线和多行文本层 ...

Cesium学习五：使用entity绘制cylinder