Montreal Point Cloud【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Montreal%20Point%20Cloud.html&label=All

效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
  #toolbar {
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
  }
  #toolbar input {
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  #toolbar .header {
    font-weight: bold;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>加载中...</h1></div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td class="header">分类类型</td>
      </tr>
      <tr>
        <td>地面</td>
        <td><input type="checkbox" data-bind="checked: ground" /></td>
      </tr>
      <tr>
        <td>低矮植被</td>
        <td>
          <input type="checkbox" data-bind="checked: low_vegetation" />
        </td>
      </tr>
      <tr>
        <td>中等(高度)植被</td>
        <td>
          <input type="checkbox" data-bind="checked: medium_vegetation" />
        </td>
      </tr>
      <tr>
        <td>高大植被</td>
        <td>
          <input type="checkbox" data-bind="checked: high_vegetation" />
        </td>
      </tr>
      <tr>
        <td>建筑物</td>
        <td><input type="checkbox" data-bind="checked: buildings" /></td>
      </tr>
      <tr>
        <td>其他/未分类</td>
        <td><input type="checkbox" data-bind="checked: other" /></td>
      </tr>
    </tbody>
  </table>
</div>

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

viewer.camera.flyTo({
  destination: new Cesium.Cartesian3(
    1223285.2286828577,
    -4319476.080312792,
    4562579.020145769,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.63053223097472,
      0.47519958296727743,
      -0.6136892226931869,
    ),
    up: new Cesium.Cartesian3(
      0.7699959023135587,
      -0.4824455703743441,
      0.41755548379407276,
    ),
  },
  duration: 0,
});

//在蒙特利尔周围添加存储视图。您可以通过捕获 camera.position、camera.direction 和 camera.up 来添加到此列表中。
Sandcastle.addToolbarMenu([
  {
    text: "(视角)概览",
    onselect: function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          1268112.9336926902,
          -4347432.089579957,
          4539129.813606778,
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            -0.23288147105081208,
            0.9376599248561527,
            -0.25799241415197466,
          ),
          up: new Cesium.Cartesian3(
            -0.015748156073159988,
            0.2616156268422992,
            0.9650436567182887,
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
      });
    },
  },
  {
    text: "高速公路",
    onselect: function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          1266560.143870489,
          -4278126.842199712,
          4542690.264566619,
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            -0.3402460635871598,
            -0.46669052711538217,
            -0.8163532128400116,
          ),
          up: new Cesium.Cartesian3(
            0.08964012922691329,
            -0.8802940231336787,
            0.46588311846138497,
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
      });
    },
  },
  {
    text: "奥林匹克体育场",
    onselect: function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          1267081.619536883,
          -4290744.917138439,
          4530941.041519919,
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            -0.735813047510908,
            0.6294547560338262,
            0.24973159435503312,
          ),
          up: new Cesium.Cartesian3(
            -0.09796934684423217,
            -0.4638476756625683,
            0.88048131204549,
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
      });
    },
  },
  {
    text: "生物圈(Biosphere)博物馆",
    onselect: function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          1269319.8408991008,
          -4293301.826913256,
          4527724.561372451,
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            -0.742505030107832,
            -0.3413204607149223,
            -0.5763563336703441,
          ),
          up: new Cesium.Cartesian3(
            -0.04655102331027917,
            -0.8320643756800384,
            0.5527222421370013,
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
      });
    },
  },
  {
    text: "皇家山圣约瑟夫大教堂",
    onselect: function () {
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3(
          1263148.6745904868,
          -4297262.506644816,
          4525958.844284831,
        ),
        orientation: {
          direction: new Cesium.Cartesian3(
            0.6550952540993403,
            0.7551122393690295,
            0.025606913355780074,
          ),
          up: new Cesium.Cartesian3(
            0.46670450470847263,
            -0.4310758971098583,
            0.7722437932516845,
          ),
        },
        easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
      });
    },
  },
]);

// 设置复选框以开启/关闭不同的分类设置。
const viewModel = {
  ground: true,
  other: true,
  buildings: true,
  low_vegetation: true,
  medium_vegetation: true,
  high_vegetation: true,
};

// 为每种分类类型分配颜色。
const pointStyles = {
  unclassified: {
    color: "color('#808080')",
    show: true,
  },
  not_awarded: {
    color: "color('#FFDEAD')",
    show: true,
  },
  ground: {
    color: "color('#FFDEAD')",
    show: true,
  },
  low_vegetation: {
    color: "color('#63FF7E')",
    show: true,
  },
  medium_vegetation: {
    color: "color('#63FF7E')",
    show: true,
  },
  high_vegetation: {
    color: "color('#22B33A')",
    show: true,
  },
  buildings: {
    color: "color('#efefef')",
    show: true,
  },
  low_point: {
    color: "color('#808080')",
    show: true,
  },
  reserved_city_diffusion: {
    color: "color('#808080')",
    show: true,
  },
};

//分类字典
const classificationDictionary = {
  not_awarded: 1,
  ground: 2,
  low_vegetation: 3,
  medium_vegetation: 4,
  high_vegetation: 5,
  buildings: 6,
  low_point: 7,
  reserved_city_diffusion: 8,
  unclassified: -1,
};

//这是一个辅助函数(helper function)，用于在每次更新 UI/复选框时重新应用样式。
function applyStyle(tileset, styles) {
  const styleObject = {};
  const styleKeys = Object.keys(styles);

  styleObject.color = {
    conditions: [],
  };
  styleObject.show = {
    conditions: [],
  };

  let finalCondition;

  for (let i = 0; i < styleKeys.length; ++i) {
    const key = styleKeys[i];
    const id = classificationDictionary[key];

    const colorCondition = [`\${Classification} === ${id}`, styles[key].color];
    const showCondition = [`\${Classification} === ${id}`, styles[key].show];

    if (id === -1) {
      colorCondition[0] = true;
      showCondition[0] = true;

      finalCondition = {
        colorCondition: colorCondition,
        showCondition: showCondition,
      };
    } else {
      styleObject.color.conditions.push(colorCondition);
      styleObject.show.conditions.push(showCondition);
    }
  }

  if (Cesium.defined(finalCondition)) {
    styleObject.color.conditions.push(finalCondition.colorCondition);
    styleObject.show.conditions.push(finalCondition.showCondition);
  }

  tileset.style = new Cesium.Cesium3DTileStyle(styleObject);
}

let tileset;
try {
  /**
   * 加拿大蒙特利尔市约 100 亿个点的 3D Tileset 数据集，2015 年采集，
   * 分辨率达 20 厘米。由 Cesium ion 进行切片处理并托管。
   */
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(28945, {
    pointCloudShading: {
      attenuation: true,
      maximumAttenuation: 2,
    },
  });
  viewer.scene.primitives.add(tileset);

  //  应用一个初始样式
  applyStyle(tileset, pointStyles);
} catch (error) {
  console.log(`加载瓦片集出错: ${error}`);
}

Cesium.knockout.track(viewModel);

const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

// ---------以下代码均为复选框change事件
Cesium.knockout.getObservable(viewModel, "ground").subscribe(function (show) {
  pointStyles.ground.show = show;
  pointStyles.not_awarded.show = show;

  applyStyle(tileset, pointStyles);
});

Cesium.knockout
  .getObservable(viewModel, "low_vegetation")
  .subscribe(function (show) {
    pointStyles.low_vegetation.show = show;

    applyStyle(tileset, pointStyles);
  });

Cesium.knockout
  .getObservable(viewModel, "medium_vegetation")
  .subscribe(function (show) {
    pointStyles.medium_vegetation.show = show;

    applyStyle(tileset, pointStyles);
  });

Cesium.knockout
  .getObservable(viewModel, "high_vegetation")
  .subscribe(function (show) {
    pointStyles.high_vegetation.show = show;

    applyStyle(tileset, pointStyles);
  });

Cesium.knockout.getObservable(viewModel, "buildings").subscribe(function (show) {
  pointStyles.buildings.show = show;

  applyStyle(tileset, pointStyles);
});

Cesium.knockout.getObservable(viewModel, "other").subscribe(function (show) {
  pointStyles.low_point.show = show;
  pointStyles.reserved_city_diffusion.show = show;
  pointStyles.unclassified.show = show;

  applyStyle(tileset, pointStyles);
});