3D地形と3D都市を表示して富士山と渋谷にドローン飛ばしてみた

map = new maplibregl.Map({
        container: mapContainer.current,
        ...
        style: {
          sources: {
            ...
            terrain: gsiTerrainSource,
            ...
          },
          layers: [
            ...
          ],
          terrain: {
            source: "terrain",
            exaggeration: 1,
          },
        },
      });
const lngLat = map.unproject(e.point);
setLng(Number(lngLat.lng.toFixed(4)));
setLan(Number(lngLat.lat.toFixed(4)));
setElevation(
    Number(
        map.transform.getElevation(lngLat, map.styl.terrain).toFixed(2)) - 450
    );
});

map = new maplibregl.Map({
        ...
        style: {
          sources: {
            ...
            plateau: {
              type: "vector",
              tiles: [
                "https://indigo-lab.github.io/plateau-tokyo23ku-building-mvt-2020/{z}/{x}/{y}.pbf",
              ],
              minzoom: 10,
              maxzoom: 16,
              attribution:
                "データの出典：<a href='https://github.com/indigo-lab/plateau-tokyo23ku-building-mvt-2020'>plateau-tokyo23ku-building-mvt-2020 by indigo-lab</a> (<a href='https://www.mlit.go.jp/plateau/'>国土交通省 Project PLATEAU</a> のデータを加工して作成)",
            },
          },
          layers: [
            ...
            {
              id: "bldg",
              type: "fill-extrusion",
              source: "plateau",
              "source-layer": "bldg",
              "minzoom": 10,
              "maxzoom": 20,
              paint: {
                "fill-extrusion-color": "#797979",
                "fill-extrusion-height": ["*", 1.0, ["get", "measuredHeight"]],
              },
            },
          ],
          terrain: {
            ...
          },
        },
      });