Cesium自动生成建筑物3D轮廓模型

简介: 这篇文章讲解了如何使用Cesium根据地形和建筑物的高度数据自动生成3D轮廓模型的方法。

Cesium提供方法自动生成建筑物3D模型,也就是根据地面上的图片,建筑物的周围轮廓生成一个模拟的3D建筑物的轮廓,并放置在地球的建筑物位置,相关注释在代码中已经体现了。下面通过代码演示整个过程:

<!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.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'token';

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器,这里不传ID传DO .
    const viewer = new Cesium.Viewer('cesiumContainer', {});    

    // 加载OSM建筑,也就是一些城市的白膜建筑,只有形状没有纹理的模型.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    //飞入到某个点查看
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

效果图 1694397718342.jpg 以上如有问题可以在评论区留言

相关文章
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4270 0
干货!解决Cesium中Entity移动漂移的问题
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2872 0
cesium添加实体不被地形遮挡的参数设置
geojson格式筛选及处理的解决方案
geojson格式筛选及处理的解决方案
378 0
Threejs实现下雨,下雪,阴天,晴天,火焰
Threejs实现下雨,下雪,阴天,晴天,火焰
2539 0
Threejs实现下雨,下雪,阴天,晴天,火焰
Cesium添加3DTile
这篇文章介绍了如何在Cesium中添加3DTile内容,以增强三维地理空间数据的表现,并提供了实现的具体步骤和代码示例。
381 1
Cesium添加3DTile
|
数据采集 数据可视化
国内77个城市建筑物轮廓(带高度)数据分享(附百度网盘)
国内77个城市建筑物轮廓(带高度)数据分享(附百度网盘)
1789 1
ThreeJs制作管道中水流效果
这篇文章详细介绍了如何在Three.js中创建具有动态水流效果的管道模型,通过纹理贴图的移动来模拟水流的视觉效果。
949 2
ThreeJs制作管道中水流效果
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
554 2
Cesium导入geojson数据
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。
766 2
|
JavaScript 算法 定位技术
利用Cesium和JS实现地点点聚合功能
利用Cesium和JS实现地点点聚合功能
615 0