学习【Cesium】第七篇,Cesium地图加载3D建筑物并设置属性(学不会揍我)

15 篇文章 6 订阅
5 篇文章 0 订阅

Cesium地图加载3D建筑物

话不多说,看(图文步骤请查看上一篇)步骤 ↓ ↓ ↓

第一步: 登陆【cesium icon】 网站: Cesium ion

第二步: Cesium OSM Buildings 、New York City 3D Buildings添加至My Assets中

第三步: 建筑3DTiles数据加载至地图

  a. 加载 Cesium OSM Buildings ,设置建筑颜色,定位至上海(东方明珠塔)

//  Cesium地图 --加载建筑体并设置不同的颜色
loadBuilding() {
    const tileset =  this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(96188)
    }))
    
    this.viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(121.49272854520109, 31.24444484775727,  600.5782714174909), 
        new Cesium.HeadingPitchRange(Cesium.Math.toRadians(6.2831853071795845),  Cesium.Math.toRadians(-0.13274323360597196), 5000))
        tileset.style = new Cesium.Cesium3DTileStyle({
        color: 'color("#565a57",0.8)',
        show: true
    })
},

  b. 加载 New York City 3D Buildings,设置建筑颜色规则,定位至纽约(罗斯福岛)

  这边在添加图层资产的时候,我们可以注意到,右边的介绍:

 说的是每个3D Tileset 

  • BIN— NYC DoB(建筑部)ID
  • DOITT_ID— NYC DoITT 信息 ID
  • Longitude— 经度。
  • Latitude— 纬度。
  • Height— 建筑物的地面高度,以米为单位。
  • TerrainHeight— 相对于椭球体到建筑物底部的标高。
  • Year— 这栋建筑的建造年份。
  • Majority_Ownership_Type— 这栋建筑中最常见的业主类型(也分很多类,什么个体、合作等等)。

 //  Cesium地图 --加载建筑体并设置不同的颜色

//  Cesium地图 --加载建筑体并设置不同的颜色
loadBuilding2() {
    const tileset = this.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(75343)
        })
)
this.viewer.camera.lookAt(
                Cesium.Cartesian3.fromDegrees(-73.95715181691992, 40.754468669343076, 1847.383194184224), 
                new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0.5212177975607402), 
                    Cesium.Math.toRadians(-0.10745795023302507), 10000))
           
           
            // 条件,颜色
tileset.style = new Cesium.Cesium3DTileStyle({
    color: {
        conditions: [
             ['${Height} >= 100', 'color("purple", 0.5)'],
            ['${Height} >= 50', 'color("red")'],
            ['true', 'color("blue")']
        ]
    },
    show: '${Height} >= 0',
    meta: {
        description: '"Building id ${id} has height ${Height}."'
        }
    })
},

 那么下一章,学习空间数据点、线、面、标签的加载,go go

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
好的,针对你的问题,我可以给你一些指导。首先,你需要明确3D Tiles的目的是什么。如果你只需要显示一个小范围的地理区域,那么局部就是一个非常好的选择,它可以帮助你提高应用程序的性能。 在Cesium中,你可以使用Tileset类3D Tiles。Tileset类提供了一些方法,能够帮助你控制和显示3D Tiles的细节。下面是一个示例代码,演示如何并调整3D Tiles: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var tileset = new Cesium.Cesium3DTileset({ url : 'path/to/your/tileset' }); viewer.scene.primitives.add(tileset); // 通过设置Tileset的transform属性,调整3D Tiles的位置和方向 tileset.readyPromise.then(function(tileset) { var boundingSphere = tileset.boundingSphere; var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 10.0); var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); }); // 通过设置Tileset的maximumScreenSpaceError属性,控制3D Tiles的细节级别 tileset.maximumScreenSpaceError = 8; ``` 在这个示例中,我们首先创建了一个Cesium的Viewer实例,并将其作为容器显示在HTML页面中。然后,我们创建了一个Tileset实例,并将其添到场景中。接下来,我们设置了Tileset的transform属性,将3D Tiles调整到我们想要的位置和方向。最后,我们设置了Tileset的maximumScreenSpaceError属性,控制3D Tiles的细节级别。 希望这个示例能够帮助你并调整3D Tiles。如果你还有其他的问题,请随时问我。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

New_Wang

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

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

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

打赏作者

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

抵扣说明:

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

余额充值