DeckGL 거리측정 기능 개발

1. DeckGl 거리측정 개발

  - Deckgl Hover evt , Click evt 를 이용한 기능 구현

2. 코드

 

let preDisTanceLongLat = [];

new Deck({
    id: 'map'
    canvas: 'map'
    layers: [baseMap] // 배경지도
    onHover: function(e) {
        const distancePointlayer = new ScatterplotLayer({
            id: 'distancePath-movePoint',
            data: [e.coordinate],
            opacity: 0.8,
            stroked: true,
            filled: true,
            txGrupKey: 'distance',
            radiusScale: 2,
            getPosition: d => {
                return d;
            },
            getRadius: 2,
            getFillColor: d => [255, 255, 255, 0],
            getLineColor: d => [255, 255, 255]
        });

        if (preDisTanceLongLat.length > 0) {
            var oData = [{
                prelonglat: preDisTanceLongLat[tpreDisTanceLongLat.length - 1],
                nextLonLat: e.coordinate
            }];
            const distanceLinelayer = new PathLayer({
                id: 'distanceLinelayer_dash',
                data: oData,
                getWidth: 2,
                pickable: false,
                widthScale: 3,
                widthMinPixels: 2,
                widthMaxPixels: 2,
                getPath: d => {
                    return d.geom.geometry.coordinates
                },
                getColor: d => [255, 172, 0],
                getDashArray: [3, 2],
                dashJustified: false,
                extensions: [new PathStyleExtension({
                    dash: true
                })],
            });
        }
    },
    onClick: function(e, mouseInfo) {
        let longlat = e.coordinate //현재 마우스 위치 
        preDisTanceLongLat.push(longlat);
    }
})