Cesium学习五：使用entity绘制cylinder

news/2024/7/7 19:40:55

一、圆柱绘制代码

上一篇介绍了多边形的绘制，本篇介绍圆柱的绘制，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.2.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.2.7 outline

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

2.2.8 outlineColor

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

2.2.9 outlineWidth

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

2.2.10 numberOfVerticalLines

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

2.2.11 slices

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

2.2.12 distanceDisplayCondition

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


http://lihuaxi.xjx100.cn/news/39858.html

相关文章

MPLS BGP virtual private network OptionB实验

MPLS BGP virtual private network OptionB实验

拓补图 以CE1、PE1、P1、ASBR1配置为例&#xff0c;CE2、PE2、P2、ASBR2的配置同理 1.配置IP地址 2.配置代码 CE&#xff1a; PE&#xff1a; ASBR&#xff1a; 3.总结 这次的实验是使用上次OptionA的实验的基础上进行更改然后配置的&#xff0c;这里面变化的点主要有以下…
阅读更多...
信息系统项目管理基础

信息系统项目管理基础

项目管理基础 重点&#xff1a; 项目的特点 项目的5个特点&#xff1a;临时性&#xff0c;独特的产品&#xff0c;服务或成果&#xff0c;逐步完善&#xff0c;资源约束&#xff0c;目的性。 目标与约束 时间&#xff0c;成本和质量往往是冲突的&#xff0c;需要取舍。 项目…
阅读更多...
大数据常见面试题

大数据常见面试题

大数据常见面试题 1、MySQL索引有哪些&#xff1f; 1.1、普通索引index&#xff1a;加速查找 1.2、唯一索引 主键索引&#xff1a;primary key&#xff1a;加速查找约束&#xff08;不为空且唯一&#xff09;唯一索引&#xff1a;unique&#xff1a;加速查找约束&#xff0…
阅读更多...
Linux基本运维汇总

Linux基本运维汇总

1 rpm管理 rpm的作用类似于windows上的电脑管家中软件管理、安全卫士里面“软件管家”等产品&#xff0c;是RPM软件包的管理工具。rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序&#xff0c;由于它遵循GPL规则且功能强大方便&#xff0c;因而广受欢迎。逐渐受到…
阅读更多...
Nginx日志格式说明

Nginx日志格式说明

1、日志位置及配置 默认位置在nginx安装目录下的&#xff1a;logs/access.log 也可修改日志配置&#xff0c;在配置文件中&#xff1a;conf/nginx.conf 日志格式参数&#xff1a;log_format #log_format main $remote_addr - $remote_user [$time_local] "$request&qu…
阅读更多...
自定义Android日期选择器

自定义Android日期选择器

自定义Android日期选择器背景调研思考和总结另一种方案背景 设计小姐姐&#xff0c;给了一个如下所示的需求&#xff0c;很显然这是一个日期选择器 调研 目前ANDROID主流的日期选择器&#xff0c;是官方提供的DatePickerDialog&#xff0c;创建DatePickerDialog如下&#x…
阅读更多...
dialogx，给大家推荐一个开源安卓弹窗组件。

dialogx，给大家推荐一个开源安卓弹窗组件。

DialogX优势 对话框是一个软件对用户操作进行响应、反馈的重要组件&#xff0c;而 DialogX 将可以协助开发者快速完成这些事务。 我们力求减少开发者所需要担心的&#xff0c;所需要顾虑的&#xff0c;而打造一款可以在任意时间&#xff0c;任意情况都能轻松使用的对话框组件…
阅读更多...
【AI】PyTorch实战（三）：迁移学习

【AI】PyTorch实战（三）：迁移学习

1、简述 迁移学习和微调的区别： 1.1 迁移学习 迁移学习 feature + classifier：通常做法就是在大的数据集（比如ImageNet）上训练出一个CNN，然后提取最后一层卷积层或者倒数第二层全连接层的输出作为CNN 特征，然后直接使用 SVM、贝叶斯或softmax等分类器进行分类； 1.2 …
阅读更多...
最新文章

Copyright @ 2022~2023