Closed2022/02/25にクローズ2

deck.gl で Plateau の 3D Tiles を読み込んで表示する

PLATEAU

deck.gl

Kenta Watashima

公式の examples を参考に、deck.gl で MapBox をベースマップとして表示させる

app.js

import { Deck } from '@deck.gl/core';
import { GeoJsonLayer, ArcLayer } from '@deck.gl/layers';
import mapboxgl from 'mapbox-gl';

const INITIAL_VIEW_STATE = {
  latitude: 35.681236,
  longitude: 139.767125,
  zoom: 12,
  bearing: 0,
  pitch: 30,
};

const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';

const map = new mapboxgl.Map({
  container: 'map',
  style: MAP_STYLE,
  interactive: false,
  center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
  zoom: INITIAL_VIEW_STATE.zoom,
  bearing: INITIAL_VIEW_STATE.bearing,
  pitch: INITIAL_VIEW_STATE.pitch
});

export const deck = new Deck({
  canvas: 'deck-canvas',
  width: '100%',
  height: '100%',
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  onViewStateChange: ({viewState}) => {
    map.jumpTo({
      center: [viewState.longitude, viewState.latitude],
      zoom: viewState.zoom,
      bearing: viewState.bearing,
      pitch: viewState.pitch
    });
  },
  layers: []
});

index.html

<!doctype html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>deck.gl example</title>
    <style>
    #container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    #container > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    </style>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <canvas id="deck-canvas"></canvas>
    </div>
    <script src='app.js'></script>
  </body>
</html>

ただの白地図

Kenta Watashima

Tile3DLayer を追加

app.js

const tile3dLayer = new Tile3DLayer({
  id: 'tile3dlayer',
  pointSize: 1,
  data: 'https://s3-ap-northeast-1.amazonaws.com/3dimension.jp/13000_tokyo-egm96/13101_chiyoda-ku_notexture/tileset.json',
  loader: Tiles3DLoader,
  onTilesetLoad: tileset => {
    const { cartographicCenter } = tileset;
    const [longitude, latitude] = cartographicCenter;
    console.log(longitude, latitude);
  },
  onTileLoad: tileHeader => {
    tileHeader.content.cartographicOrigin = new Vector3(
      tileHeader.content.cartographicOrigin.x,
      tileHeader.content.cartographicOrigin.y,
      tileHeader.content.cartographicOrigin.z - 40
    );
  },
});

const deck = new Deck({
  // ...
  layers: [tile3dLayer],
});

千代田区

このスクラップは2022/02/25にクローズされました