추적 • freenas • linux_user • mysql_ssh_tunnel • css • raspberry_pi

차이

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

차이 보기로 링크

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