plunkerでdeck.gl

概要

plunkerでdeck.glやってみた。
思えば、plunkerで、deck.glしたいだけの一年だった。
mapboxは、使わん。

写真

サンプルコード

const tileLayer = new deck.TileLayer({
    data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
    minZoom: 0,
    maxZoom: 19,
    tileSize: 256,
    renderSubLayers: props => {
        const {
            bbox: {
        west, 
        south, 
        east, 
        north
      }
        } = props.tile;
        return new deck.BitmapLayer(props, {
            data: null,
            image: props.data,
            bounds: [west, south, east, north]
        });
    }
});

const deckgl = new deck.DeckGL({
  initialViewState: {
    latitude: 38.0,
    longitude: 140.0,
    zoom: 7,
    maxZoom: 16,
    pitch: 80,
    bearing: -15
  },
  controller: true,
    layers: [tileLayer],
});

成果物

以上。