Map 개발자의 길

기능 구현에 앞서서 - 본개발자는 DeckGl은 왜 !!!지원을 안해줄까??? 하는 의구심에 매우 피곤함..... - 굳이 이걸 이렇게 개발 해야하나 싶음 .... - 익숙 해진다 싶으면 왜 맨날 삽질일까 ㅜㅜ 1. Deckgl 툴팁 위치 고정 1.1 Deckgl에서 제공하는 이벤트를 최대한 사용해 보았다 ... import {WebMercatorViewport} from '@deck.gl/core'; let map = new Deck({ ... // 지도 위치 이동시 발생 이벤트 onViewStateChange: e => { /************************************************************ * * 본개발자의 tooltip은 dataset에 위경도(LongLa..

1. LIneString, Polygon, Point의 웹상에서 최적으로 보일수 있는 Zoom 구하기 let width = 1920; //웹사이트 넓이 let height = 1080; // 웹사이트 높이 let BOUNDS = [[bbox[0],bbox[1]],[bbox[2],bbox[3]]]; //[[127.09875551,37.20934113],[127.10195002,37.21464863]] const viewport = new WebMercatorViewport({ width: width, height: height }); const {longitude, latitude, zoom} = viewport.fitBounds(BOUNDS, { padding: 50 // 해당 Features의 BBOX..

1. DeckGL TextLayer 기능 개발 - Deckgl 한글 라벨 입력시 미표출 또는 한글깨짐 2. 코드 Deckgl TextLayer 에서 추가 할 항목 2.1 characterSet 디폴트 범위가 ASCII characters 32-128 , // 한글을 지원하지 않는다........... characterSet에 필요한 한글 코드를 직접 입력하는 방법 말고는 찾질 못했다 그래도 없는것보다는 급하면 사용가능 할꺼 같다. import DeckGL from '@deck.gl/react'; import {TextLayer} from '@deck.gl/layers'; function App({data, viewState}) { const layer = new TextLayer({ id: 'text-l..

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; }, g..

1. DeckGL Polygon, Line, Marker 등 기울기(pitch) 적용 깨짐 형상 - DekcGL 각 레이어의 기본 디폴트 높이 값을 가지고 있는 부분에서 생기는 오류 이다. - 해당 에러 화면 2. 코드 new GeoJsonLayer({ data, getLineColor: oDeSetting.styleLine.color, getLineWidth: oDeSetting.styleLine.width, getFillColor: oDeSetting.stylePolygon.color, // 레이어 높이값 적용 해제 하는 코드 // 아래 부분에 해당 코드 추가 parameters: { depthTest: false } });