Cesium 3DTilesInspector监视器

var viewer = new Cesium.Viewer("cesiumContainer", {
  shadows: true,
});
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;

var scene = viewer.scene;
var tileset;

var viewModel = {
  tilesets: [
    {
      name: "Tileset",
      resource:
        "../SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json",
    },
    {
      name: "Translucent",
      resource:
        "../SampleData/Cesium3DTiles/Batched/BatchedTranslucent/tileset.json",
    },
    {
      name: "Translucent/Opaque",
      resource:
        "../SampleData/Cesium3DTiles/Batched/BatchedTranslucentOpaqueMix/tileset.json",
    },
    {
      name: "Multi-color",
      resource:
        "../SampleData/Cesium3DTiles/Batched/BatchedColors/tileset.json",
    },
    {
      name: "Request Volume",
      resource:
        "../SampleData/Cesium3DTiles/Tilesets/TilesetWithViewerRequestVolume/tileset.json",
    },
    {
      name: "Batched",
      resource:
        "../SampleData/Cesium3DTiles/Batched/BatchedWithBatchTable/tileset.json",
    },
    {
      name: "Instanced",
      resource:
        "../SampleData/Cesium3DTiles/Instanced/InstancedWithBatchTable/tileset.json",
    },
    {
      name: "Instanced/Orientation",
      resource:
        "../SampleData/Cesium3DTiles/Instanced/InstancedOrientation/tileset.json",
    },
    {
      name: "Composite",
      resource:
        "../SampleData/Cesium3DTiles/Composite/Composite/tileset.json",
    },
    {
      name: "PointCloud",
      resource:
        "../SampleData/Cesium3DTiles/PointCloud/PointCloudRGB/tileset.json",
    },
    {
      name: "PointCloudConstantColor",
      resource:
        "../SampleData/Cesium3DTiles/PointCloud/PointCloudConstantColor/tileset.json",
    },
    {
      name: "PointCloudNormals",
      resource:
        "../SampleData/Cesium3DTiles/PointCloud/PointCloudNormals/tileset.json",
    },
    {
      name: "PointCloudBatched",
      resource:
        "../SampleData/Cesium3DTiles/PointCloud/PointCloudBatched/tileset.json",
    },
    {
      name: "PointCloudDraco",
      resource:
        "../SampleData/Cesium3DTiles/PointCloud/PointCloudDraco/tileset.json",
    },
  ],
  selectedTileset: undefined,
  shadows: true,
};

Cesium.knockout.track(viewModel);//把对象关联到Cesium这里用的绑定可以参考观察者模式

var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);//绑定MV

Cesium.knockout
  .getObservable(viewModel, "shadows")
  .subscribe(function (enabled) {
    viewer.shadows = enabled;
  });

Cesium.knockout
  .getObservable(viewModel, "selectedTileset")
  .subscribe(function (options) {
    if (Cesium.defined(tileset)) {
      scene.primitives.remove(tileset);
    }
    if (!Cesium.defined(options)) {
      inspectorViewModel.tileset = undefined;
      return;
    }

    tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: options.resource,
      })
    );

    tileset.readyPromise
      .then(function () {
        inspectorViewModel.tileset = tileset;
        viewer.zoomTo(
          tileset,
          new Cesium.HeadingPitchRange(
            0,
            -2.0,
            Math.max(100.0 - tileset.boundingSphere.radius, 0.0)
          )
        );

        var properties = tileset.properties;
        if (
          Cesium.defined(properties) &&
          Cesium.defined(properties.Height)
        ) {
          tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
              conditions: [
                ["${Height} >= 83", "color('purple', 0.5)"],
                ["${Height} >= 80", "color('red')"],
                ["${Height} >= 70", "color('orange')"],
                ["${Height} >= 12", "color('yellow')"],
                ["${Height} >= 7", "color('lime')"],
                ["${Height} >= 1", "color('cyan')"],
                ["true", "color('blue')"],
              ],
            },
          });
        }
      })
      .otherwise(function (error) {
        throw error;
      });
  });

viewModel.selectedTileset = viewModel.tilesets[0];

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function (movement) {
  var feature = inspectorViewModel.feature;
  if (Cesium.defined(feature)) {
    var propertyNames = feature.getPropertyNames();
    var length = propertyNames.length;
    for (var i = 0; i < length; ++i) {
      var propertyName = propertyNames[i];
      console.log(
        propertyName + ": " + feature.getProperty(propertyName)
      );
    }
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function (movement) {
  var feature = inspectorViewModel.feature;
  if (Cesium.defined(feature)) {
    feature.show = false;
  }
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);

可以看到添加3DTiles监视器的代码比较简单，将Cesium.viewerCesium3DTilesInspectorMixin对象传入拓展函数viewer.extend()即可。