概要説明

CesiumJSを使って地図の表示から町丁目ポリゴンの表示まで行います。
3Dマップ上に2Dポリゴン（町丁目ポリゴン）を表示させる目的は、特に深い理由があるわけではなく、どのように動作するのか試してみたいと思ったからです。

使用したもの

CesiumJS

CesiumJSは、3D地理空間アプリケーションを作成するためのオープンソースJavaScriptライブラリです

町丁目ポリゴン

町丁目とは行政界の一つで「富士見町3丁目」「広尾1丁目」など「●丁目」で表わされる行政区画のことです。行政界は他には都道府県や市区町村、大字などがあります。
町丁目ポリゴンとは町丁目の境界データであり、e-stat で小地域（町丁・字等別）という名称で公開されています。

今回使用する町丁目ポリゴンは、TerraMap API からレスポンスされたGeoJSONです。

レスポンスされたGeoJSONのサンプル

PolygonSample.geojson

{
  "type": "FeatureCollection",
  "features": [
      {
          "type": "Feature",
          "properties": {
              "area": {
                  "area": 0.1875635128037082
              },
              "point_coordinates": [
                  139.66641,
                  35.67514
              ],
              "geocode": "13113002802"
          },
          "geometry": {
              "type": "MultiPolygon",
              "coordinates": [
                  [
                      [
                          [
                              139.671072468,
                              35.675472254
                          ],
                          [
                              139.671087008,
                              35.675455055
                          ],
                          [
                              139.668725237,
                              35.674791116
                          ],
                          [
                              139.665545327,
                              35.673872239
                          ],
                          [
                              139.661458827,
                              35.672694079
                          ],
                          [
                              139.661419451,
                              35.672851547
                          ],
                          [
                              139.661380745,
                              35.672937476
                          ],
                          [
                              139.661480105,
                              35.673177857
                          ],
                          [
                              139.661702716,
                              35.673487731
                          ],
                          [
                              139.661785305,
                              35.673651366
                          ],
                          [
                              139.661614923,
                              35.674287572
                          ],
                          [
                              139.6614962,
                              35.674380922
                          ],
                          [
                              139.661459656,
                              35.674408793
                          ],
                          [
                              139.662425327,
                              35.674739902
                          ],
                          [
                              139.66654409,
                              35.676248336
                          ],
                          [
                              139.667841199,
                              35.676698291
                          ],
                          [
                              139.670456339,
                              35.677651212
                          ],
                          [
                              139.670879432,
                              35.675730569
                          ],
                          [
                              139.670937715,
                              35.675631642
                          ],
                          [
                              139.671072468,
                              35.675472254
                          ]
                      ]
                  ]
              ]
          }
      }
  ]
}

地図の表示

CesiumJSのクイックスタートを参考にしてindex.htmlを以下のように作成します。
YOUR_ACCESS_TOKEN部分はCesium ionで事前にアカウントを作成してからトークンを取得し、ソースコードを書き換える必要があります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<style>
html, body, #cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
<body>
  <div id="cesiumContainer"></div>
    <script type="module">
      // Your access token can be found at: https://ion.cesium.com/tokens.
      // This is the default access token from your ion account
      Cesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN';
    
      // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
      const viewer = new Cesium.Viewer('cesiumContainer', {
        showCreditsOnScreen: true
      });    

      // Fly the camera to San Francisco at the given longitude, latitude, and height.
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(139.66641, 35.67514, 1600),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-90.0),
        }
      });

      // Add Cesium OSM Buildings, a global 3D buildings layer.
      const buildingTileset = await Cesium.createOsmBuildingsAsync();
      viewer.scene.primitives.add(buildingTileset);
    </script>
  </div>
</body>
</html>

表示結果

ローカルサーバーを立ち上げて地図が表示されるか確認します。
（Visual Studio Codeの拡張機能Live Serverを使用しました）

カーキ一色のオブジェクトはCesium OSM Buildingsという、OpenStreetMapのデータをもとに生成された3D建物のレイヤーです。

GeoJSONファイルを読み込み町丁目ポリゴンを表示

続いてindex.htmlのscriptタグ内の最下部に以下のコードを追加してGeoJSONファイルを読み込み、地図上に町丁目のポリゴンを表示するようにします。
GeoJSONファイル(PolygonSample.geojson)はindex.htmlと同じ階層に配置しました。

index.html

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('PolygonSample.geojson', {
  stroke: Cesium.Color.HOTPINK,
  fill: Cesium.Color.PINK,
  strokeWidth: 3,
  markerSymbol: '?'
}));

参考情報

表示結果

GeoJSONで読み込んで表示されたピンク色の町丁目ポリゴンの上に、カーキ色の3D建物のレイヤーが目立っています。表示順は、町丁目ポリゴン、3D建物のレイヤーの順で描画されているようで、3D建物のレイヤーは町丁目ポリゴンとは別のレイヤーとして描画されています。