[LeafletJs] geoserver 설정, shape 파일 적용, wms 활용
2022. 2. 17. 13:53
LeafletJs
geoserver에 shape 파일을 넣어서 지도에 표출하는 부분을 해보겠습니다. geoserver 다운로드 사이트 http://geoserver.org/ GeoServer GeoServer is an open source server for sharing geospatial data. Designed for interoperability, it publishes data from any major spatial data source using open standards. geoserver.org 필자는 c:\geoserver 폴더를 경로에 압축을 풀었습니다. geoserver start startup 파일 실행 shutdown 파일은 서버를 끌때 실행합니다. 실행이 되었으면 해당 url 접속 http:..
[LeafletJs] vworld wmts 배경지도 띄우기, map, circle, polygon, pin 객체 올리기
2022. 2. 17. 13:27
LeafletJs
vworld wmts api를 사용하여서 배경지도를 띄우는 부분입니다. 인터넷에 대부분의 예제는 아래 코드처럼 띄우는 형식으로 되어있는데 url에 보면 202002 버전으로 업데이트된 지도이므로 최신의 지도가 아닐수 있습니다. 저는 그래서 wmts api를 활용해서 지도를 표출해보겠습니다. var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ //Vworld Tile 변경 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png' }) }) ], view: new ol.View({ center: [14126669.4158924..
[LeafletJs] 도별 지도 영역 표시
2021. 9. 28. 22:43
LeafletJs
us-states.js var statesData = { "type":"FeatureCollection" ,"bbox":[124.7893155286271,33.172610584346295,130.96524575425667,38.54255349620522] ,"features":[ {"type":"Feature" ,"geometry":{ "type":"Polygon" ,"coordinates":[ [ [128.54880989370014,38.301950820518755],[128.5600921732829,38.25735515107489],[128.59761716763322,38.21480959198724],[128.60765942875406,38.15215810015938],[128.642068544478..
[LeafletJs] GeoJson 예제
2021. 9. 14. 13:28
LeafletJs
- GeoJson - GeoJSON은 다양한 지리 데이터 구조 […]를 인코딩하기 위한 형식입니다. GeoJSON 객체는 공간 영역(Geometry), 공간적으로 제한된 엔터티(Feature) 또는 기능 목록(FeatureCollection)을 나타낼 수 있습니다. GeoJSON은 Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon 및 GeometryCollection과 같은 지오메트리 유형을 지원합니다. GeoJSON의 기능에는 Geometry 개체 및 추가 속성이 포함되고 FeatureCollection에는 기능 목록이 포함됩니다. -geoJson.html - sample-geojson.js var freeBus = { "typ..
[LeafletJs] 아이콘 가이드 예제
2021. 9. 14. 13:19
LeafletJs
- 아이콘 가이드 예제 - 이 자습서에서는 지도에 표시하는 마커에서 사용할 고유한 아이콘을 쉽게 정의하는 방법을 배웁니다. - iconGuide.html - 아이콘 클릭했을경우 https://leafletjs.com/examples/custom-icons/example-one-icon.html Custom Icons Tutorial - Leaflet leafletjs.com -소스 설명 var map = L.map('map').setView([51.5, -0.09], 13); 51.5 -> 경도값 -0.09 -> 위도값 13 -> zoom level - 너비조정 var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'leaf-shadow.png', //가로, 세로..
[LeafletJs] 모바일 가이드 예제
2021. 9. 14. 13:13
LeafletJs
- 이 예에서는 iPhone, iPad 또는 Android 휴대폰과 같은 모바일 장치에 맞게 조정된 전체 화면 지도를 만드는 방법과 현재 사용자 위치를 쉽게 감지하고 사용하는 방법을 배웁니다. - mobileGuide.html - 소스설명 var map = L.map('map').fitWorld(); 현재 위치를 찍음 - 핀 클릭했을경우 onLocationFound 원 클릭시 이벤트 var radius = e.accuracy / 2; -> 원크기
[LeafletJs] 가이드 예제
2021. 9. 14. 11:17
LeafletJs
- 이 단계별 가이드는 전단지 지도 설정, 마커, 폴리라인 및 팝업 작업, 이벤트 처리를 포함하여 전단지 기본 사항을 빠르게 시작할 수 있도록 도와줍니다. - guide.html - 소스설명 var mymap = L.map('mapid').setView([51.505, -0.09], 13); - setView([경도, 위도], zoom level)을 뜻함 - 위도, 경도란? https://www.google.com/maps Google Maps Find local businesses, view maps and get driving directions in Google Maps. www.google.com ex) 구글맵에서 주소를 시청이라 검색을하면 뒤에 @37.5712137,126.9648429,14z/..
[LeafletJs] Leaflet이란?
2021. 9. 14. 10:56
LeafletJs
-Lefalet이란? - Leaflet은 모바일 친화적인 대화형 지도를 위한 최고의 오픈 소스 JavaScript 라이브러리입니다. 무게가 약 39KB에 불과한 JS 에는 대부분의 개발자에게 필요한 모든 매핑 기능 이 있습니다. 전단지는 단순성 , 성능 및 사용성 을 염두에 두고 설계되었습니다 . 모든 주요 데스크톱 및 모바일 플랫폼에서 효율적으로 작동하고 많은 플러그인 으로 확장할 수 있으며 아름답고 사용하기 쉬우며 잘 문서화된 API 와 간단하고 가독성이 좋은 소스 코드 를 제공 합니다.