추적 • leafletjs

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
tech:leafletjs [2015/06/09 06:38] – created V_Ltech:leafletjs [2023/07/25 06:04] (현재) – V_L
줄 1: 줄 1:
 +{{tag>leafletjs 오픈소스 지도}}
  
 ====== Leafletjs ====== ====== Leafletjs ======
  
 http://leafletjs.com/ An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps http://leafletjs.com/ An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
 +
 +  * [[http://www.gisdeveloper.co.kr/entry/Leaflet-%EA%B0%95%EC%A2%8C-%E3%85%A1-1-%EB%B0%B0%EA%B2%BD%EC%A7%80%EB%8F%84%EB%A1%9C-%ED%83%80%EC%9D%BC%EB%A7%B5-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0|강좌1]]
 +  * [[http://www.gisdeveloper.co.kr/entry/Leaflet-%EA%B0%95%EC%A2%8C-%E3%85%A1-2-%EA%B7%B8%EB%9E%98%ED%94%BD-%EA%B0%9D%EC%B2%B4%EB%A5%BC-%EC%A7%80%EB%8F%84%EC%97%90-%EC%98%AC%EB%A6%AC%EA%B8%B0|강좌2]]
 +  * [[http://www.gisdeveloper.co.kr/entry/Leaflet-%EA%B0%95%EC%A2%8C-%E3%85%A1-3-%EC%A7%80%EB%8F%84%EC%97%90-%ED%8C%9D%EC%97%85Popup-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0|강좌3]]
 +
 +
 +http://www.osgeo.org 
 +
 +=====예제=====
 +
 +====타일맵====
 +<file html>
 +<html>
 +<head>
 +<link rel="stylesheet"
 +    href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 +<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 +<style>
 +    #map { height: 360px; }
 +</style>
 +<script language="javascript"> 
 +function onLoAd() 
 +{
 +    var map = L.map('map');
 +    L.tileLayer('http://f4map.vaslor.net/files/maps/f4/{z}/{x}/{y}.png?',
 +    {
 +        maxZoom: 6,
 +        minZoom: 2,
 +        continuousWorld: false,
 +        noWrap:true,
 +        tms:true,
 +        attribution: '<a href="http://openwiki.kr/tech/leafletjs">test</a>',
 +        id: 'test' 
 +    }
 +      ).addTo(map);
 +    map.setView([-55,-80], 2);
 +}
 +</script>
 +</head>
 +<body onLoad="onLoAd()">
 +    <div id="map"></div>
 +</body>
 +</html>
 +</file>
 +====단일이미지====
 + 출처: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
 +
 +<file html>
 +<html>
 +<head>
 +<link rel="stylesheet"
 +    href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 +<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 +<style>
 +    #map { height: 360px;
 +    width:300px; }
 +</style>
 +<script language="javascript"> 
 +function onLoAd() 
 +{
 +
 +// create the slippy map
 +var map = L.map('map', {
 +  minZoom: 1,
 +  maxZoom: 4,
 +  center: [0, 0],
 +  zoom: 1,
 +  crs: L.CRS.Simple
 +});
 +
 +// dimensions of the image
 +var w = 4158,
 +    h = 4155,
 +    url = './fallout-4-map.png';
 +
 +// calculate the edges of the image, in coordinate space
 +var southWest = map.unproject([0, h], map.getMaxZoom()-1);
 +var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
 +var bounds = new L.LatLngBounds(southWest, northEast);
 +
 +// add the image overlay, 
 +// so that it covers the entire map
 +L.imageOverlay(url, bounds).addTo(map);
 +
 +// tell leaflet that the map is exactly as big as the image
 +map.setMaxBounds(bounds);
 +
 +}
 +</script>
 +</head>
 +<body onLoad="onLoAd()">
 +    <div id="map"></div>
 +</body>
 +</html>
 +
 +</file>
 +
 +
 +=====플러그인=====
 +
 +[[https://github.com/stefanocudini/leaflet-search|탐색]]
  
  
  
-{{tag>leafletjs}}