Deckgl tooltip position fixed( 툴팁고정)

   기능 구현에 앞서서

       - 본개발자는 DeckGl은 왜 !!!지원을 안해줄까??? 하는 의구심에 매우 피곤함..... 

       - 굳이 이걸 이렇게 개발 해야하나 싶음 ....

       - 익숙 해진다 싶으면 왜 맨날 삽질일까  ㅜㅜ

1. Deckgl 툴팁 위치 고정

    1.1  Deckgl에서 제공하는 이벤트를 최대한 사용해 보았다 

...
import {WebMercatorViewport} from '@deck.gl/core';

let map = new Deck({
	...
    
    // 지도 위치 이동시 발생 이벤트
    onViewStateChange: e => {
    	/************************************************************
         *
         * 본개발자의 tooltip은 dataset에 위경도(LongLat)값 저장되어 있음
         * <div id="tooltip"  data-lon="127.0952452665531" data-lat="37.20030546967153" style="display: block">...</div>
         * 
         ************************************************************/
    	const el = document.getElementById('tooltip');
        
        // 핵심 이벤트 WebMercatorViewport
        let pro2Px = new WebMercatorViewport(e.viewState)
        // 투영된 좌표계의 위치를 px 값으로 반환
        .project([Number(el.dataset.lon) , Number(el.dataset.lat)]);
        
        
        el.style.left = pro2Px[0] + 'px';
        el.style.top = pro2Px[1]  + 'px';
    
    }
})

 1.2. Picxel에 오차 범위가 좀 있는듯 하지만 일단 88.99%는 도달한듯 싶다... 

     

2. 결과

  -  코드 적용 전

 - 코드 적용 후

코드 적용 후