cesium 添加纽约城市模型

代码就是bug

已于 2022-09-05 11:30:01 修改

阅读量1.4k

点赞数 3

文章标签： cesium 纽约3D建筑 cesium ion

于 2022-09-05 10:58:41 首次发布

本文链接：https://blog.youkuaiyun.com/XKFC1/article/details/126699883

版权

本文介绍了如何使用Cesium JavaScript库加载纽约的3D建筑，并通过Cesium3DTileset和Cesium3DTileStyle进行样式定制，包括不同高度建筑的颜色设定，以及如何设置相机视角。此外，还讲解了Cesium Ion资源的注册、资产添加和令牌使用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、cesium 添加纽约3D建筑

效果

在这里插入图片描述

代码

Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MTVlZGNjMi1mMDMxLTQ1YzMtODE3NS1mZjNlM2ZlOWNhZTgiLCJpZCI6OTYzODcsImlhdCI6MTY2MjIwNDI0OH0.OYbdYQbWco0YihneBtqn1nXiIHI85Bqe2AQ8TtXW3Oo';

viewer = new Cesium.Viewer('box',{
    animation: false, // 是否显示左下角动画控件
    fullscreenButton: false, // 是否显示全屏按钮
    geocoder: false, // 是否显示地名查找控件
    homeButton: false, // 是否显示home键
    navigationHelpButton: false, // 是否显示帮助信息控件
    sceneModePicker: false, // 是否显示投影方式
    timeline: false, // 是否显示时间线控件
    baseLayerPicker: false, // 是否显示图层选择控件
    selectionIndicator: false, // 是否显示指示器组件
    terrainProvider: Cesium.createWorldTerrain(
        {
          // url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals:true,   //增加法线提高光照效果
          requestWaterMask:true,       //增加水面特效
        }
    ),
  });
  viewer._cesiumWidget._innerCreditContainer.style.display = 'none'; // 去除logo信息
  viewer.scene.debugShowFramesPerSecond = false;    // 显示帧速
  // 关闭地表大气层，默认是 true
  viewer.scene.globe.showGroundAtmosphere = false;
	
	// 相机设置到纽约
  viewer.camera.setView({
    destination:new Cesium.Cartesian3(1332761,-4662399,4137888),
    orientation:{
      heading:0.60,
      pitch:-0.66
    }
  })
// 添加纽约3D建筑，75343是资产ID
let city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url:Cesium.IonResource.fromAssetId(75343)
  }))
  // 定义3d样式
  // 不同高度的建筑，使用不同颜色
  let heightStyle = new Cesium.Cesium3DTileStyle({
    color:{
      // 条件判断具体的颜色
      conditions : [
        ['${Height} >= 300','rgba(45,0,75,0.5)'],
        ['${Height} >= 200','rgb(102,71,151)'],
        ['${Height} >= 100','rgba(170,162,204,0.5)'],
        ['${Height} >= 50','rgba(224,226,238,0.5)'],
        ['${Height} >= 25','rgba(252,230,200,0.5)'],
        ['${Height} >= 10','rgba(248,176,87,0.5)'],
        ['${Height} >= 5','rgba(198,106,11,0.5)'],
        ["true","rgb(127,59,8)"]
      ]
    }
  })
  city.style = heightStyle;