cesium 添加纽约城市模型

一、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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

二、城市3D建筑

cesium ion中有纽约城市3D建筑，直接调用即可

三、cesium ion资源使用

注册

使用电子邮箱注册账号

添加资产

登录之后，点击Asset Depot，该页面展示了cesium ion的资产，点击最右侧的+号，将资产添加到My Assets

使用资源的token

点击Access Tokes,复制token字符串
在项目中设置token
Cesium.Ion.defaultAccessToken=token;