추적 • phpmyadmin • css_border • mysql_ssh_tunnel • css • code_52_error

차이

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

차이 보기로 링크

--- tech:leafletjs [2015/12/11 16:24] – V_L
+++ tech:leafletjs [2023/07/25 06:04] (현재) – V_L
@@ 줄 1: / 줄 1: @@
+{{tag>leafletjs 오픈소스 지도}}
 ====== Leafletjs ======
@@ 줄 10: / 줄 11: @@
 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 오픈소스 지도}}