로춘남의 IT이야기

지도 위에 무언가 이벤트를 꾸미고싶다면, 아마 오픈레이어스. Openlayers를 사용하는일이 많을 것이다. 내가 오픈레이어스를 처음 적용했던건 Map 위에 Layer 파일을 띄우는것이었다. OpenLayer는 예제가 잘 되어있어서 공식홈페이지에서 단계적으로 활용해도 좋다. 먼저 지도를 뛰우기 위해선 View를 설정해줘야한다. [1. View 설정] var view = new ol.View({ zoom : 14, // 초기화면 zoom level minZoom : 5, // 최소 zoom level maxZoom : 20, // 최대 zoom level projection : 'EPSG:4326', center : [127.0437, 37.6477] }); 지도가 보여지기 위한 View를 설정해준다. z..

오픈레이어스를 통해서 Map 위에 레이어를 생성했다. 기존에 만들어진 레이어를 Map 위에서 On/Off를 통해 나타났다가 사라졌다가를 반복했었는데, 기존에 만들어진 레이어가 아닌, 내가 클릭하는것에 따라 Map 위에 찍히는 점들이 있었다. 이 점들은 기존에 있던 레이어가 아니기때문에 Layer Off 기능을 클릭해도 사라지지가 않았다. 그래서 기존 기능에 추가적으로 Map 위에 있는 Layer들을 초기화 시키고자 refresh() 기능을 사용해봤다. 말 그대로 Map을 깨끗한 초기 상태로 바꿔주는법. 코드는 아주 간단하다. map.getLayers().forEach(layer => layer.getSource().refresh()); 이렇게 사용해주면 Map 위에 있던 지저분한 Layer들이 깨끗해지고..

기본사이트 구상 : 최종 구현 시스템을 고려하여 프로토 타입 생성 확대, 축소 - 기본 http://openlayers.org/en/latest/examples/accessible.html#map 화면 이동 및 검색 목록 클릭시 이동 - http://openlayers.org/en/latest/examples/animation.html http://openlayers.org/en/latest/examples/center.html - http://openlayers.org/en/latest/examples/navigation-controls.html 마크표시 + 이동경로 - 기본 및 전제조건, 부가기능 기능 http://openlayers.org/en/latest/examples/draw-features...

Map 위에 Layer를 생성하고, Style를 변경해줄때 필요한 부분 var styles = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#fc8d16', width: 6, }), }) ]; var featureSource = new ol.source.Vector({ }); var featureLayer = new ol.layer.Vector({ source: featureSource, //생성한 Source를 포함하여 layer 생성 style: styles, //style 적용 }); var multiPointFeature = new ol.Feature({ geometry: new ol.geom.MultiPoint(pnt) }); va..