이번 포스팅에서는 leaflet js를 설정하고 vworld에서 지원하는 wmts 배경지도 api를 사용해서 지도를 표현하는것을 개발해보겠습니다.
css, js
<!-- leaflet -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<body>
<main role="main" class="inner cover">
<h1 class="cover-heading">LeafletJs Tutorial</h1>
<!-- <p class="lead">- openstreetmap</p> -->
<!-- <div id="map"></div> -->
<!-- <br> -->
<p class="lead">- wmts 배경지도 (내위치)</p>
<div id="map"></div>
</main>
</body>
<script>
$(function(){
init();
});
function init(){
navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);
}
//현재 좌표값 가져오기
function onGeoOk(position){
const lon = position.coords.latitude;
const lat = position.coords.longitude;
vworldWmts(lon, lat);
}
//내좌표값 가져올때 error
function onGeoError(){
alert("Can't find you. No weather for you.");
}
//vowld wmts 배경지도
function vworldWmts(lon, lat){
//apikey
const apiKey = $("#apiKey").val();
//leaflet 지도 띄우기 (EPSG : 4326)
const leafletMap = L.map('map').setView([lon, lat], 15)
L.tileLayer("http://api.vworld.kr/req/wmts/1.0.0/"+apiKey+"/Base/{z}/{y}/{x}.png").addTo(leafletMap);
}
</script>- 화면이 로딩될때 navigator.geolocation.getCurrentPosition 함수가 호출되어 현재 내 좌표값을 얻어 냅니다.
- 이후 해당 좌표값 위치로 wmts를 사용해서 표현합니다.
- apikey는 아래 포스팅에서 한것처럼 vworld api key를 받아서 넣으면 됩니다.
vworld wmts api 사용방법
https://aamoos.tistory.com/515
[LeafletJs] vworld wmts 배경지도 띄우기, map, circle, polygon, pin 객체 올리기
vworld wmts api를 사용하여서 배경지도를 띄우는 부분입니다. 인터넷에 대부분의 예제는 아래 코드처럼 띄우는 형식으로 되어있는데 url에 보면 202002 버전으로 업데이트된 지도이므로 최신의 지도
aamoos.tistory.com
'LeafletJs' 카테고리의 다른 글
| [leafletjs] 배경지도 레이어 변경 (0) | 2023.01.05 |
|---|---|
| [leafletjs] wmts 배경지도에 오른쪽 마우스 클릭시 출발 도착 marker 찍기 (0) | 2023.01.03 |
| [LeafletJs] vworld 지도 검색 api를 활용하여 place marker 찍기 (0) | 2022.02.23 |
| [LeafletJs] 마우스로 도형 그리기 (0) | 2022.02.17 |
| [leafletJs] shape 파일 sld 활용 (0) | 2022.02.17 |