Leafletjs - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

====== Leafletjs ======

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>

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International