-
[Web] Leaflet 활용하기 2DmapWeb 2019. 11. 20. 14:11
Web상에 2D지도 보여주기
leafletjs 라이브러리를 사용하여 vworld지도를 가져온 후 웹 상에 보여주었다.
아래 링크를 통해 소스코드를 다운 받을 수 있다.
https://leafletjs.com/download.html
Download - Leaflet - a JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Download Leaflet Version Description Leaflet 1.6.0 Stable version, released on November 17, 2019. Leaflet 1.7-dev In-progress version, developed on the master branch. Leaflet 0.7.7 Lega
leafletjs.com
그리고 지도를 담을 스타일을 지정해준다.
body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }vworld의 템플릿을 가져와 배경으로 보일 지도 테마를 지정하고 처음위치와 Zoom을 설정한 후, 원하는 위치에 마커를 찍는다.
setView 함수는 [위도,경도],줌 레벨 을 의미한다.
지도는 vworld을 사용하였으며 tileLayer의 {s}는 서버 도메인, {z},{x},{y}는 타일 지도의 위치를 나타낸다.
마지막으로 addTo 매소드로 map에 타일 지도를 추가시켜주었다.
var map; map = L.map('map').setView([37.4979462, 127.025427], 17); map.attributionControl.setPrefix(''); var layer = new L.TileLayer('http://xdworld.vworld.kr:8080/2d/Base/201411/{z}/{x}/{y}.png', { attribution: '© Vworld', minZoom: 1, maxZoom: 19 }).addTo(map); var marker = L.marker([37.4979462, 127.025427]).addTo(map);전체 소스코드
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add a 2D model</title> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <!-- leaflet 연결에 필요한 라이브러리 --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script> <div id='map'></div> <script> var map; map = L.map('map').setView([37.4979462, 127.025427], 17); map.attributionControl.setPrefix(''); var layer = new L.TileLayer('http://xdworld.vworld.kr:8080/2d/Base/201411/{z}/{x}/{y}.png', { attribution: '© Vworld', minZoom: 1, maxZoom: 19 }).addTo(map); var marker = L.marker([37.4979462, 127.025427]).addTo(map); </script> </body> </html>
실행화면 'Web' 카테고리의 다른 글
[Web] Mapbox 활용하기 3Dmap(three.js 라이브러리) (0) 2019.11.21