【Cesium】Cesium加载3DTiles与问题总结(JS)

Cesium加载3DTiles的基本方法

	const viewer = new Cesium.Viewer("cesiumContainer");
	const tileset = viewer.scene.primitives.add(
	  new Cesium.Cesium3DTileset({
    
    
	    url: {
    
    YOURURL},
	    //url: Cesium.IonResource.fromAssetId(96188),
	  })
	);

• 第一句构建了Cesium的view对象，通过id绑定了HTML中的一个div容器进行显示
• 然后，使用viewer的scene属性的primitive属性下的add()方法为场景添加一个图层
• 需要注意：这里涉及到了三种Cesium实体：Viewer（视图）, Scene（场景）, PrimitiveCollection（图元组），其中视图包含了场景，场景下有图元组。这样的定义与许多地图API（百度地图，ArcGIS API等）十分类似。参见Cesium API for JS官方文档或Cesium.PrimitiveCollection说明
• 在这里使用了新建的Cesium3DTileset对象作为加入的图元组
• 新建Cesium3DTileset对象需要指定数据来源
  url可以由相对路径或网址指定：

  url: 'modeldata/3Dtilesdata',
  

  也可以也可以使用以下语法通过Cesium ion工作台指定来源

  url: Cesium.IonResource.fromAssetId(96188),
  

踩坑过程

使用官网tileset.json数据加载为空

数据源

在一些教程中使用到了tileset.json数据作为示例，加载出来的网页为空，并输出以下错误：

打开tileset.json，有以下内容：

    ...
    "content": {
    
    
      "boundingVolume": {
    
    
        "region": [
          -0.0004001690908972599,
          0.8988700116775743,
          0.00010096729722787196,
          0.8989625664878067,
          0,
          241.6
        ]
      },
      "uri": "0/0/0.b3dm"
    },
    ...

因此，加载为空的原因可能是官网移除了附带的其他数据的文件夹(0/0/0.b3dm等)，但是tileset.json的包围框等附属信息仍存在，在Cesium ion中显示如下：

使用Cesium.IonResource.fromAssetId(5741)无法加载

要使用Cesium ion中的数据，首先需要确保工作区中有对应资源。否则需要自行上传，更改"96188"为要导入数据的id
使用id为5741无法加载可能是因为新版本的Cesium ion内不再自带纽约市的建筑物数据，因此资源内没有id为5741的项，如下：

另外，在“Asset Depot”中可以搜索到纽约市的建筑物3DTiles，添加到工作区中，id依旧不是5741，是图中的75343

其他

使用以下语句缩放视图至3DTile所在区域并设置样式（来自官网示例）：

      (async () => {
    
    
        try {
    
    
          await tileset.readyPromise;
          await viewer.zoomTo(tileset);

          // Apply the default style if it exists
          var extras = tileset.asset.extras;
          if (
            Cesium.defined(extras) &&
            Cesium.defined(extras.ion) &&
            Cesium.defined(extras.ion.defaultStyle)
          ) {
    
    
            tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
          }
        } catch (error) {
    
    
          console.log(error);
        }
      })();