plunkerでdeck.gl その2

1328 ワード
deckgl Plunker Plunker テキストリンク

概要

plunkerでdeck.glやってみた。
国土地理院の地図、使ってみた。

写真

サンプルコード



const tileLayer = new deck.TileLayer({
    data: "https://cyberjapandata.gsi.go.jp/xyz/std/{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],
});

成果物

以上。