GeoJSON and TopoJSON【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=GeoJSON%20and%20TopoJSON.html&label=All

效果如下视频所示：

示例代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
  infoBox: false,
});

viewer.cesiumWidget.creditContainer.style.display = "none";

//例1: 默认样式加载.
Sandcastle.addDefaultToolbarButton("使用默认样式(加载数据)", function () {
  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load("../SampleData/ne_10m_us_states.topojson"),
  );
});

//例2: 使用基本样式选项加载(数据).
Sandcastle.addToolbarButton("使用基本样式选项加载(数据)", function () {
  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load("../SampleData/ne_10m_us_states.topojson", {
      stroke: Cesium.Color.HOTPINK,//桃红色，艳粉色
      fill: Cesium.Color.PINK.withAlpha(0.5),//半透明粉色
      strokeWidth: 3,
    }),
  );
});

//例3: 加载(数据)后应用自定义图形。
Sandcastle.addToolbarButton("加载(数据)后应用自定义图形", function () {
  //为随机数生成器设置种子(初始值)，以获得可重复的结果
  Cesium.Math.setRandomNumberSeed(0);

  const promise = Cesium.GeoJsonDataSource.load(
    "../SampleData/ne_10m_us_states.topojson",
  );
  promise
    .then(function (dataSource) {
      viewer.dataSources.add(dataSource);

      //获取实体数组集合
      const entities = dataSource.entities.values;

      const colorHash = {};
      for (let i = 0; i < entities.length; i++) {
        //为每个实体根据州名生成随机颜色。某些州包含多个实体，因此我们将颜色存储在哈希(表)中，确保整个州使用相同的颜色。
        const entity = entities[i];
        const name = entity.name;
        let color = colorHash[name];
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1.0,
          });
          colorHash[name] = color;
        }

        //将多边形材质设置为随机颜色。
        entity.polygon.material = color;
        //删除轮廓
        entity.polygon.outline = false;

        //根据州人口数据拉伸多边形。每个实体存储其来源 GeoJSON 要素的属性。由于人口数值庞大，我们将其除以 50。
        entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
      }
    })
    .catch(function (error) {
      //显示加载时遇到的任何错误。
      window.alert(error);
    });
});

//切换 demo 时重置场景。
Sandcastle.reset = function () {
  viewer.dataSources.removeAll();

  //将相机设置为以美国为中心的倾斜视角，并切换回世界坐标系下的(可)移动模式
  /**
   * lookAt方法会将相机锁定到一个目标点，即不能通过鼠标来平移场景。
   */
  viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
    new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0),
  );
  /**
   * viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);可以解锁锁定的相机视角，以便随意平移场景
   */
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
};