Deck.gl 이란?

deckgl_front


WebGL 기반의 대용량 데이터의 시각화 분석을 돕는 라이브러리이다.

특징

  • 레이어 기반의 데이터 가시화
  • GPU 고정밀 계산 (64비트 부동 소수점 계산을 에뮬레이션)
  • React 및 Mapbox GL 통합


MIT License


[기본샘플]

런던에서 전 세계 공항으로의 경로를 ArcLayer를 통해 표현 (GeoJSON 데이터 기반)


deck_basic


<html>
<head>
    <!-- deck.gl standalone bundle -->
    <script src="https://unpkg.com/deck.gl@^8.1.0/dist.min.js"></script>

    <style type="text/css">
        body {margin: 0; padding: 0;}
        #container {width: 100vw; height: 100vh;}
    </style>
</head>

<body>
<div id="container"></div>
</body>

<script type="text/javascript">

    // source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
    const COUNTRIES =
        'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line
    const AIR_PORTS =
        'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

    const deckgl = new deck.DeckGL({
        container: 'container',

        initialViewState: {
            latitude: 51.47,
            longitude: 0.45,
            zoom: 4,
            bearing: 0,
            pitch: 30
        },
        controller: true,

        layers: [
            new deck.GeoJsonLayer({
                id: 'base-map',
                data: COUNTRIES,
                // Styles
                stroked: true,
                filled: true,
                lineWidthMinPixels: 2,
                opacity: 0.4,
                getLineColor: [60, 60, 60],
                getFillColor: [200, 200, 200]
            }),
            new deck.GeoJsonLayer({
                id: 'airports',
                data: AIR_PORTS,
                // Styles
                filled: true,
                pointRadiusMinPixels: 2,
                pointRadiusScale: 2000,
                getRadius: f => (11 - f.properties.scalerank),
                getFillColor: [200, 0, 80, 180],
                // Interactive props
                pickable: true,
                autoHighlight: true,
                onClick: info => info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
            }),
            new deck.ArcLayer({
                id: 'arcs',
                data: AIR_PORTS,
                dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
                // Styles
                getSourcePosition: f => [-0.4531566,51.4709959], // London
                getTargetPosition: f => f.geometry.coordinates,
                getSourceColor: [0, 128, 200],
                getTargetColor: [200, 0, 80],
                getWidth: 1
            })
        ]
    });
</script>
</html>


출처

deckgl_doc deckgl github