plunkerでdeck.gl その18

概要

plunkerでdeck.glやってみた。
loaders.gl、使ってみた。

写真

サンプルコード

const { DeckGL, Tile3DLayer, FlyToInterpolator, COORDINATE_SYSTEM } = deck;
const { I3SLoader } = loaders;
const INITIAL_VIEW_STATE = {
  latitude: 38.2,
  longitude: -80.9,
  zoom: 10,
  pitch: 60,
  pitch: 0
};
const deckgl = new DeckGL({
  container: "mapContainer",
  mapStyle: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  onViewStateChange: ({ viewState }) => {
    deckgl.setProps({
      viewState
    });
  }
});
function renderLayers(opacity) {
  deckgl.setProps({
    layers: [new Tile3DLayer({
        id: "tile-3d-layer",
        data:
          "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0",
        loadOptions: {
          i3s: {
            coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS
          }
        },
        onTilesetLoad: (tileset) => {
          const { zoom, cartographicCenter } = tileset;
          const [longitude, latitude] = cartographicCenter || [];
          const newViewState = {
            zoom: zoom + 3.5,
            latitude,
            longitude,
            pitch: 80,
            transitionInterpolator: new FlyToInterpolator({ speed: 1.5 }),
            transitionDuration: "auto"
          };
          deckgl.setProps({
            viewState: newViewState
          });
        },
        loader: I3SLoader
      })]
  });
}
renderLayers();

成果物

以上。