一、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;
二、城市3D建筑
cesium ion中有纽约城市3D建筑,直接调用即可
三、cesium ion资源使用
注册
使用电子邮箱注册账号
添加资产
登录之后,点击Asset Depot,该页面展示了cesium ion的资产,点击最右侧的+号,将资产添加到My Assets
使用资源的token
点击Access Tokes,复制token字符串
在项目中设置token
Cesium.Ion.defaultAccessToken=token;