Cesium学习五：使用entity绘制cylinder

已于 2022-09-28 22:04:45 修改
阅读量2.8k 收藏 11
点赞数 2
分类专栏： gis 文章标签： Cesium cylinder 圆柱 柱体 entity
于 2022-09-27 21:29:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014523388/article/details/127078523
版权

一、圆柱绘制代码

上一篇介绍了多边形的绘制，本篇介绍圆柱的绘制，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'; //替换成你的Token
    Cesium.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，3d
        baseLayerPicker: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>

cylinder

二、图解参数

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之间时可看到该柱体，其他距离不显示该柱体，这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能

小何又沐风
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 1266
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
地图之家总目录
热门推荐
GIS之家家长
02-28 1万+
地图之家总目录 cesium示例 leaflet示例
cesium学习之路（十）在地图中绘制圆柱、圆锥与球体。
m0_63701303的博客
11-17 3174
在地图中绘制圆柱、圆锥与球体。
78.（cesium篇）cesium椭圆编辑椭圆修改.zip
04-29
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“78.（cesium篇）cesium椭圆编辑椭圆修改”。如下载有问题，可联系博主。 解压密码：cesium
【Cesium入门教程】第一课：Cesium简介与快速入门
最新发布
GIS前端嘉欣的博客
04-22 2078
在上述代码中，我们首先设置了Cesium的访问令牌，然后创建了一个Viewer实例，并指定了容器的ID。通过本教程，你应该对Cesium有了一个基本的了解，并且能够开始创建自己的Cesium项目。在接下来的教程中，我们将深入探讨Cesium的更多高级特性和应用场景。安装开发工具：确保你的开发环境中安装了Node.js和npm（或pnpm），这些是JavaScript项目管理和打包的常用工具。获取Cesium资源：访问Cesium的官方网站和中文文档，了解如何获取Cesium的SDK和API文档。
cesium中Entity的CylinderGraphics添加圆柱体
tjx1997的博客
10-26 550
cesium可以利用CylinderGraphics类将创建的圆柱体添加到地球中。
Cesium圆柱和圆锥entity绘制
你们瞎搞
01-17 820
原生的 Cesium中提供了绘制圆柱的方法，看似没有提供绘制圆锥的方法，其实在配置项里面可以直接设置参数生成圆锥，在cylinder对象里面有两个参数，topRadius:上底面的半径（如果为0则是圆锥啦）；bottomRadius:下底面的半径；
Cesium 绘制不同的形状（Entity）
u014328243的博客
05-17 4559
Cesium里面绘图最常用的就是 entity，而Cesium也提供了不同类型的entity,这里就介绍一下在Cesium中如何绘制这些entity。 1 billboard，广告牌 /** * 添加entity-billboard * 广告牌，也就是一张图片、图标数据。 * **/ addEntityBillboard() { let entityBillBoard = new Cesium.Entity({ id: 'EntityBillboard0', name: 'EntityBillbo
cesium_demos:cesium样例库
05-02
ceisum 使用demo、方法或components总结使用cesium+react+ts编写的cesium使用。启动项目 :alien_monster::alien_monster::alien_monster:yarn安装依赖yarn start启动项目样例内容资源加载加载3dtiles调整3dtiles高度...
Cesium-GeoserverTerrainProvider:插入以使用 geoserver 作为地形提供者
07-24
使用 Cesium 1.6 和 geoserver 2.6.2 进行测试。 许可证：Apache 2.0。 免费用于商业和非商业用途。 参见 LICENSE.md。 用法 可选：在 geoserver 中将 mySLD.xml 作为新样式导入，以在其他颜色范围内渲染您的图层...
Cesium绘制点线面的工具封装
08-17
使用之前先看博客，里面有工具的介绍： Cesium 实战记录（四） 绘制点线面的工具封装 https://blog.csdn.net/KK_bluebule/article/details/126384623
cesium-apps:使用铯创建的应用程序
06-20
【cesium-apps: 使用铯创建的应用程序】 Cesium 是一个强大的开源JavaScript库，专用于构建3D地球和地理空间应用程序。它提供了丰富的交互式3D地球可视化功能，包括地形、建筑物、卫星图像以及各种数据的叠加显示。...
cesium-mapv:示例服务地址
05-27
在【cesium-mapv-master】这个压缩包中，包含了项目的源码和其他相关资源，供开发者研究和学习如何将Cesium和MapV结合使用。通过深入理解并实践这个项目，你将能掌握如何利用这些工具创建自己的3D地理可视化应用。
纯代码方式实现cesium倾斜摄影单体化和楼栋分层
qq_40863573的博客
07-20 3463
纯代码方式实现cesium倾斜摄影单体化和楼栋分层
cesium加载geojso面数据拉升高度
猪猪侠的博客
08-09 1655
拉升面高度
cesium视频教程
10-15
本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。   
【Cesium】创建形状基础---点、线、面、矩形、柱体、连廊、墙等
Wangzx的博客
07-13 4022
【代码】Cesium创建形状基础---点、线、面、矩形、柱体、连廊、墙等。
cesium态势标绘 （ 绘制攻击箭头）
God's asylum的博客
05-18 2534
vue + cesium攻击箭头标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
cesium EPSG::900913
08-29
- *3* [ol-cesium：OpenLayers-Cesium集成](https://download.csdn.net/download/weixin_42121086/14949890)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小何又沐风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值