Map 개발자의 길

DeckGL PointLayer draw 본문

DeckGL

DeckGL PointLayer draw

YD_Koo 2020. 2. 25. 16:51

1. 사용이유 

   - point 중첩 되는 부분의 색상을 밝게 하고 싶을때 

 

2. 코드

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

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

    var dataPoint = new Array();
    /*
    ./test2.csv
     lon,lat,time
     126.97657,37.57227,1
     126.97638,37.56988,2
     126.97037,37.5691,3
    */
    qbicDeck_V8.d3.csv("./test2.csv", function(datas) {
        dataPoint.push(datas);
    });
    const layerPoint = new ScatterplotLayer({
        data: dataPoint,
        getPosition: d => {
            return [Number(d.lon), Number(d.lat)]
        },
        getFillColor: [60, 220, 255],
        getRadius: 5,
        transitions: {
            getFillColor: 1000,
            getRadius: 1000
        },
        radiusScale: 10,
        radiusMinPixels: 1,
        radiusMaxPixels: 10,
        getElevation: 100,
        parameters: {
            [GL.DEPTH_TEST]: false,
            [GL.BLEND]: true,
            [GL.BLEND_SRC_RGB]: GL.ONE,
            [GL.BLEND_DST_RGB]: GL.ONE,
            [GL.BLEND_EQUATION]: GL.FUNC_ADD,
        },
        pickable: true,
    });

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

2.1 중첩구간 색상 표현 코드

  정확한 기능에대해서는 분석 하고 있습니다. 확인 하는데로 추가 하도록 할께요 

parameters: {
    [GL.DEPTH_TEST]: false,
    [GL.BLEND]: true,
    [GL.BLEND_SRC_RGB]: GL.ONE,
    [GL.BLEND_DST_RGB]: GL.ONE,
    [GL.BLEND_EQUATION]: GL.FUNC_ADD,
}

 

3. 결과화면

DeckGl Point 중첩구간 색상 밝게
DeckGl Point 중첩구간 색상 밝게 (확대)

4. 초보 개발자의 고뇌

  - 상세한 세부 설정은 ... 추가 하도록 하겠습니다.

  - DeckGL은 크롬에서만 사용 하는걸로 기타 브라우저에서는 Point 미 표출 현상

반응형

'DeckGL' 카테고리의 다른 글

DeckGL TextLayer 한글 깨짐/미표출  (2) 2022.03.28
DeckGL 거리측정 기능 개발  (0) 2021.10.06
DeckGL Map 기울기(pitch) 적용시 깨짐 현상  (0) 2021.06.09
DeckGL Layer On/Off  (0) 2020.11.16
DeckGL + xyz URL 요청  (2) 2020.02.20
'DeckGL' Related Articles more
Comments