본문 바로가기
반응형

GIS14

[OpenLayers] 특정 영역으로 지도 화면 이동하기 (ft. fit() / duration) - view.fit() 사용하여 특정 영역으로 부드럽게 이동하기 - 지도의 특정 영역으로 이동하는 방법은 찾아보면 되게 많은데 여러 방법중에 부드럽게 애니메이션을 사용하여 움직이는 방법에 대해 알아보자. *다른 게시글에 지도 띄운 소스를 기반으로 작성함으로 그부분은 생략한다. view 에서 fit()이라는 함수를 제공해주는데 이 함수에 애니메이션을 추가할 수 있다. fit은 center와 zoom을 동시에 이동시켜주기에 간단하지만 굉장히 유용하다물론 지금까지 많이 사용 안해본 내 입장에서만이다. 일단 extent를 알고 있다고 가정하에 예제를 통해 진행해보자. ▷일반적인 사용방법 (이동) map.getView().fit(extent1);// extent1 : [12962380.601052666, 4004.. 2020. 12. 7.
[OpenLayers] 현재 지도 화면의 영역(extent) 가져오기 (ft. calculateExtent()) - 현재 지도 map 의 extent 가져오기 - 현재 보고있는 map 화면의 영역(extent) 를 가져오자 일단 지도를 띄우기 위해 코드를 작성한다. doctype html> #map { height: 800px; width: 100%; } OpenLayers-vworld OpenLayers_MAP //기본지도 var baseMap = new ol.layer.Tile({ source: new ol.source.XYZ({ //Vworld Tile 변경 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png' }) }); var map = new ol.Map({ target : 'map', layers: [baseMap], view: new.. 2020. 12. 7.
[OpenLayers] CQL filter 사용하기 (ft. geoserver WMS) - WMS CQL filter 사용하기 -geoserver에서 wms 를 가져올때 필터 조건을 사용하여 조건에 맞는 부분만 가져오는 방법에 대해 알아보자. 그냥 기존에 가져와서 사용하던 방식에서 params부분에 "CQL_FILTER"를 추가해서 넣어주기만 하면 된다.(윗부분은 항상 동일하니 script부분만 정리한다.) var sig = new ol.layer.Tile({ title : 'SIG', source : new ol.source.TileWMS({ url : 'http://192.168.200.200:8080/geoserver/mine/wms', params:{ 'VERSION': '1.1.0', 'LAYERS' : 'mine:SIG', 'BBOX':[746110.2515145557,14587.. 2020. 9. 9.
[OpenLayers] 좌표 경도(x),위도(y) 의 좌표계 변경하기 (from 4326 to 3857) - x,y 좌표계 변경하기 from EPSG:4326 to EPSG:3857 - API 기능을 통해 x,y 좌표를 받아왔는데 이 좌표를 사용하여 지도를 움직이고자 하는데 좌표계가 맞지않아 바꿔야 하는 상황이다. 이번 역시 결과적으로 매우 간단한 코드가 나와서 다행이다. var center = ol.proj.transform([lon,lat],'EPSG:4326','EPSG:3857') map.getView().setCenter(center); 변환 자체는 ol.proj.transform 한줄이면 끝나고 그걸 사용하여 openlayers의 지도를 이동해주는 코드이다. 변경 전/후를 비교해보면 다음과 같다. 같은 방식으로 다른 x,y 좌표계 역시도 변경할 수 있을것으로 보인다. 2020. 8. 18.
[OpenLayers] features from GeoJSON import (피처정보 가져오기) - OpenLayers import GeoJSON - 앞서 정리한 글에서 geoJson export를 해봤는데여기서 export한 geojson 즉 json파일을 import해보도록하자(파일로 추출은 안해봤지만 했다는 가정하에 파일을 읽어보도록한다.) geojson으로 추출한 정보가 들어있는 이 .json파일을 가지고 해볼것이다. OpenLayers_MAP Point LineString Polygon Circle None getGeoJSON setGeoJSON importJson() 메소드를 통해서 json 파일을 읽어보려한다. 읽는방법 자체는 간단하다 ol.source.Vector 에서 url 과 format을 설정해주고 vector layer를 생성한 후 maplayer에 넣어주면 된다. 그러면 아래.. 2020. 8. 17.
[OpenLayers] features to GeoJSON export (피처정보 추출하기) - 도형으로 그린 피처 정보 GeoJSON으로 추출하기 -직접 그린 도형들을 geojson 형태로 추출하여 저장해야 하는 경우가 생길수 있다. geojson은 간단하게 json 에서 위치정보를 가진것을 geojson이라 생각하고 넘어가자 다행히 json형태로 정보를 추출하는건 openlayers - extension 에 예제가 존재하기 때문에 보고 가져다 사용하면 된다. https://viglino.github.io/ol-ext/examples/bar/map.control.editionbar.html OpenLayers_MAP Point LineString Polygon Circle None getGeoJSON 이 앞에서 그리기 관련 게시글을 작성했던 소스와 별반 차이는 없지만 마지막에 new ol.fo.. 2020. 8. 17.
[OpenLayers] 마우스로 도형 그리기(Draw) 및 벡터레이어(VectorLayer) 추가 - OpenLayers Draw & VectorLayer -지도 위에 마우스로 가볍게 도형을 그리고 싶을때 Draw를 활용하여 그리는데 그냥 지도위에는 그릴수는 없고 vector layer를 깔아두고 그 위에 그려야한다. OpenLayers_MAP Point LineString Polygon Circle None 코드를 보면 알겠지만 selectbox를 통해서 그리기를 제어할 것이다. ol.layer.Vector 를 통해서 우선 지도에 vector layer를 깔아주고(여기서 wrapX : false 는 같은 좌표에 한해서 그리기게 제한된다-같은좌표 클릭 불가) ol.interaction.Draw를 통해 선택한 type 별로 그리기를 지원해줄것이다. 소스 중간에 removeInteraction()과 ad.. 2020. 8. 17.
[OpenLayers] 스와이프(Swipe) 기능 적용하기 (ft. ON/OFF 제어) - OpenLayers Swipe 기능 적용하기 -이번에도 역시 oplayers-extension 에서 가져온 기능을 사용할것이다. 사실 예제가 아주 잘되어있기에 가져다 쓰기만 하면 된다. https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html 기본 예제에서 추가적으로 ON/OFF 로 제어하는 방법까지 기록해보자.(ON/OFF는 다른방법도 많겠지만 일단 잠깐 맛보기로 적용시켜 본것이다.) OpenLayers_MAP SWIPE OpenLayers extension 에서 제공하는 ol.control.Swipe() 기능을 사용한 것이다. 그저 스와이프 기능만 적용한다면 swipeOn() 메소드에 존재하는 4줄만 가져다 쓰면 사용할 수 .. 2020. 8. 17.
[OpenLayers] 특정 레이어 추가 및 제거하기 (ft. addLayer, removeLayer) - OpenLayers를 활용한 특정 레이어의 추가 및 삭제 -첫 배경지도로 띄운 map에 특정 레이어를 추가하거나 삭제를 해보자. 복잡한 예제말고 그냥 간단한 상황의 예제를 통해 추가 및 삭제를 진행해보자 OpenLayers_MAP 우선 당연하게도 layer를 추가하거나 삭제하기 위해서는layer를 담아두는 map객체가 존재해야한다.그리고쉽게 접근하기위해 미리 두개의 레이어를 선언해두고map객체에는 Basemap을 표출해놓았다.레어어를 추가하거나 삭제하는 명령어는 간단하다.map객체에서 지원해주는 명령어가 있기때문에(map을 담아둔 변수를 의미한다.) map.addLayer(grayMap);을 사용하여 회색지도를 넣어봤다. 이제 회색지도를 지워보도록하자 추가할때 넣어준 layer변수명을 그대로 사용해주.. 2020. 8. 10.
반응형
TOP

티스토리툴바