plunkerでdeck.gl その2

#概要

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],
});

#成果物

以上。