Cesium开发:模拟建筑楼板数据

简介: Cesium开发:模拟建筑楼板数据

多层的建筑体,在不需要精确的模型效果时,使用Cesium的Polygon去模拟每层楼的楼板效果,设定每层楼的高度和楼层的总数,生成CZML文件,批量加载楼板的数据。
根据Cesium的api,加载一个带高度拉起效果的polygon,使用以下的代码:

var greenPolygon = viewer.entities.add({
   
   

name : 'Green extruded polygon',

polygon : {
   
   

hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,

-100.0, 42.0,

-104.0, 40.0]),

height:50000,

extrudedHeight: 100000.0,

material : Cesium.Color.GREEN 
}

});

其中设置的height和extrudedHeight是关键参数,height标示polygon离地的高度,extrudedHeight是polygon的拉高高度,根据楼层高度,设置每层的height,在加上楼层高度,设置extrudedHeight,到达分层的楼板效果。
CZML数据节点的编辑如下:


{
   
   

"id":"floor_0",

"name":"floors"

,"polygon":

{
   
   "positions":

{
   
   "cartographicDegrees":[坐标数组]},

"material":

{
   
   

"solidColor":

{
   
   "color":

{
   
   "rgba":[255,255,255,120]}

}

},

//离地高度设置

"height":0,

//拉高高度设置

"extrudedHeight":4.6,"

outline":true}

}

使用js或者其他代码,循环根据楼层数和高度进行遍历,生成最终的CZML数据。

以下是简单楼板显示效果,加上鼠标移动时的选中效果:
image.png

相关文章
|
网络协议 安全 Unix
centos7.9系统部署NFS详细流程—2023.04
centos7.9系统部署NFS详细流程—2023.04
1136 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
1437 0
|
数据可视化 前端开发 JavaScript
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
4162 0
3分钟,教你搭建一个三维城市建筑可视化系统 ( Cesium 加载 shp 数据 )
|
11月前
|
存储 消息中间件 人工智能
ApsaraMQ Serverless 能力再升级,事件驱动架构赋能 AI 应用
本文整理自2024年云栖大会阿里云智能集团高级技术专家金吉祥的演讲《ApsaraMQ Serverless 能力再升级,事件驱动架构赋能 AI 应用》。
396 108
|
11月前
Cesium自动生成建筑物3D轮廓模型
这篇文章讲解了如何使用Cesium根据地形和建筑物的高度数据自动生成3D轮廓模型的方法。
548 2
|
11月前
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
412 1
Cesium修改地球的贴图为视频或者图片
|
应用服务中间件 网络安全 nginx
nginx配置去掉路径中的指定字符
【6月更文挑战第25天】nginx配置去掉路径中的指定字符
666 0
|
JavaScript 前端开发
在vue中循环中调用接口-promise.all();按顺序执行异步处理
在vue中循环中调用接口-promise.all();按顺序执行异步处理
|
NoSQL Redis
Another Redis Desktop Manager 连接Redis(哨兵模式)
Another Redis Desktop Manager 连接Redis(哨兵模式)
902 1
|
移动开发 小程序 前端开发
Uniapp Vue3 基础到实战 教学视频
Uniapp Vue3 基础到实战 教学视频
744 1