Cesium的3D Tiles显示与隐藏的控制

Cesium拥有加载3D Tiles的功能，但是某些时候我们希望能够自主地进行3D Tiles地显示与隐藏。
这是博主的Cesium页面的左侧控制条的3D Tiles显示控制部分代码：

<div class="checkedBoxDiv">
                  <input type="checkbox" class="layer" id="json_01" name="" onclick="checkboxOnclick(this)">
                  <label for="json_01">3D Meizhou Island</label>
                </div>

这里可以看到使用的输入格式为checkbox，即在页面上显示为打勾或为空，效果如下：


在设置完样式后，需要对3D Tiles进行具体的控制，代码如下：

 function checkboxOnclick(checkbox){
      if(checkbox.checked==true){
        viewer.scene.primitives.add(tileset);
        tileset.readyPromise.then(zoomToTileset);
        tileset.show=true;
      }
      else{
        tileset.show=false;
        tileset.readyPromise.then(zoomToTileset);
      }
    }

可以看到两段代码的连接是通过Onclick对checkboxOnclick进行函数调用。
tileset是我们需要调用的3D Tiles；
zoomToTileset则是在显示3D Tiles时把页面定位到其位置的自定义函数（代码将在最后显示）。

当我们点击显示3D Tiles的按钮，会使其样式显示为打勾，在代码中会被判断为True，所以就会执行：

if(checkbox.checked==true){
            viewer.scene.primitives.add(tileset);
            tileset.readyPromise.then(zoomToTileset);
            tileset.show=true;
          }

若显示3D Tiles的按钮显示为空时，在代码中会被判断为False，所以执行：

else{
            tileset.show=false;
            tileset.readyPromise.then(zoomToTileset);
          }

最终效果如下：



以下是博主自定义的zoomToTileset的函数代码：

    var x=0;
    var y=0;
    var z=30;
    var m = Cesium.Matrix4.fromArray([
      1.0, 0.0, 0.0, 0.0,
      0.0, 1.0, 0.0, 0.0,
      0.0, 0.0, 1.0, 0.0,
      x, y, z, 1.0
    ]);
    var boundingSphere = null;
    function zoomToTileset() {
      boundingSphere = tileset.boundingSphere;
      viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

    }