DeckGL

DeckGL + xyz URL 요청

YD_Koo 2020. 2. 20. 10:31

1. 사용 이유 

  - mapbox, google 지도를 제외하고 기타 지도를 DeckGl 에서 서비스 필요시

  - 무료 라이브러리 만으로 작업을 원하는 경우

 

2. 코드


import {TileLayer as deckTileLayer} from '@deck.gl/geo-layers'; 
import {load} from '@loaders.gl/core'; 
import {Deck} from '@deck.gl/core';
import {BitmapLayer} from '@deck.gl/layers';

<script type="text/javascript">
const layer = new TileLayer({ 
  pickable: true, 
  minZoom: 0, 
  maxZoom: 19, 
  getTileData: ({x, y, z}) => load('https://f.basemaps.cartocdn.com/dark_nolabels/'+z+'/'+x+'/'+y+'.png'), 
       renderSubLayers: props => {
          const {
                bbox: {west, south, east, north} 
              } = props.tile; 

              return new BitmapLayer(props, { 
                data: null, 
                image: props.data, 
                bounds: [west, south, east, north] 
              }); 
          } 
       });

const deck = new Deck({ 
  canvas: 'map', 
  controller: true, 
  initialViewState: {longitude: 127.45, latitude: 38.78, zoom: 12}, 
  layers: [layer] 
});
</script>
<body style="height: 100%; width: 100%;">
	<canvas id="map"></canvas>
</body>

3. 결과 화면

deckgl + carto dark지도 URL 요청

4. 목적

나와 같이 삽질 하는 사람이 없었으면 ............

반응형