map을 생성할 때 컨트롤러의 attribution, zoom, rotate를 false로 처리한다.defaults({attribution: false, zoom: false, rotate: false}).extend([])const map = new Map({ layers: [baseLayer], target: mapRef.current, controls: defaults({ attribution: false, zoom: false, rotate: false, }).extend([]), view: new View({ projection: projection, c..
Label Decluttering openlayers에서 지도를 축소시키면 지역명(text)이 밀집된 지역은 겹치게 된다. 이때 declutter 옵션을 사용하면 확대, 축소시 자동으로 표출되는 글자를 조절해주는 편리한 옵션이다. 사용법은 declutter 옵션을 적용할 레이어에 속성값을 true로 설정해 주면 된다. const vectorLayer = new VectorLayer({ background: 'white', source: new VectorSource({ url: 'https://openlayers.org/data/vector/us-states.json', format: new GeoJSON(), }), style: function (feature) { const label = featur..
지도에 마우스를 hover하면 속성 데이터를 표출 기능이 필요했다. map.on("pointermove",fucntion(event){}) 기능을 사용하여 hover시 속성 데이터를 표출 가능하다. 하지만 레이어가 여러겹 있을 경우 어떤 속성 데이터를 표출할지 지정해 주어야한다. 레이어에 이름 지정 VectorLayer 생성시 layerName을 넣어준다. 임의의 속성을 부여했기 때문에 layerName이 아닌 name 등 다른 이름으로 속성을 지정해 주어도 된다. const vectorLayer = new VectorLayer({ source: vectorSource, style: myLayerStyle, // 위에서 정의한 스타일을 적용 layerName: 'myLayer', // 레이어 이름을 부여..
OpenLayers → Examples → Select Features의 예제 소스를 보다가 라는 처음보는 문구를 발견하게 되었다. https://openlayers.org/en/latest/examples/select-features.html Select Features Example of using the Select interaction. Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold the Shift key to toggle the feature in the sele..
Preview 데이터 준비하기 deck.gl의 Arc Layer Example을 우리나라 버전으로 변경하려고 한다. https://deck.gl/examples/arc-layer 1. 우리나라 SHP 파일 다운로드 http://www.gisdeveloper.co.kr/?p=2332 2. 좌표계 변경 (WSG 84 - EPSG:4326) https://norwegian-forest-cat.tistory.com/213 3. QGIS로 중심점 추출 - 도시별로 Arc를 연결하기 위해 중심점이 필요하다. 참고 : https://norwegian-forest-cat.tistory.com/215 code File Tree src ├── korea │ ├── assets │ │ └── arrow.svg │ ├── m..
Echarts의 Example 중 Water Content의 SVG를 변경하여 그래프를 만드려고 한다. https://echarts.apache.org/examples/en/editor.html?c=pictorialBar-body-fill Examples - Apache ECharts echarts.apache.org 처음에는 svg 파일을 import하여 적용해보려 했으나 실패했고, 공식문서를 참조하여 svg 파일의 d= 부분부터 복사하여 배열에 추가했다. Echarts 공식문서 참조: https://echarts.apache.org/handbook/en/how-to/chart-types/scatter/basic-scatter/#symbol-style 완성 화면 완성 코드 Echarts를 React에서..
