Revision of Leaflet 互動地圖應用

timmy revisou este gist 10 months ago. Ir para a revisão

Sem alterações

timmy revisou este gist 1 year ago. Ir para a revisão

1 file changed, 99 insertions

leaflet_map_with_tools.html(arquivo criado)

		@@ -0,0 +1,99 @@
1	+	<!DOCTYPE html>
2	+	<html>
3	+	<head>
4	+	<title>Leaflet 地圖範例</title>
5	+	<meta charset="utf-8" />
6	+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
8	+	<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
9	+	<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
10	+	<style>
11	+	#mapid { height: 600px; }
12	+	</style>
13	+	</head>
14	+	<body>
15	+
16	+	<div id="mapid"></div>
17	+
18	+	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
19	+	<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
20	+	<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
21	+	<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
22	+	<script src="https://unpkg.com/leaflet-measure/dist/leaflet-measure.js"></script>
23	+	<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
24	+	<script>
25	+	// 初始化地圖，設置中心點和縮放級別
26	+	var map = L.map('mapid').setView([25.033964, 121.564468], 13);
27	+
28	+	// 添加不同的圖層
29	+	var streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
30	+	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
31	+	}).addTo(map);
32	+
33	+	var satelliteLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
34	+	attribution: 'Map data: © <a href="https://www.opentopomap.org/">OpenTopoMap</a> contributors'
35	+	});
36	+
37	+	// 添加圖層控制
38	+	var baseMaps = {
39	+	"街道圖": streetLayer,
40	+	"衛星圖": satelliteLayer
41	+	};
42	+	L.control.layers(baseMaps).addTo(map);
43	+
44	+	// 添加標記群集
45	+	var markers = L.markerClusterGroup();
46	+	markers.addLayer(L.marker([25.033964, 121.564468]).bindPopup("台北 101"));
47	+	markers.addLayer(L.marker([25.0375, 121.5637]).bindPopup("圓形範圍"));
48	+	markers.addLayer(L.marker([25.0324, 121.5574]).bindPopup("多邊形範圍"));
49	+	map.addLayer(markers);
50	+
51	+	// 添加地理搜尋
52	+	var geocoder = L.Control.geocoder().addTo(map);
53	+
54	+	// 添加繪圖工具
55	+	var drawnItems = new L.FeatureGroup();
56	+	map.addLayer(drawnItems);
57	+	var drawControl = new L.Control.Draw({
58	+	edit: {
59	+	featureGroup: drawnItems
60	+	}
61	+	});
62	+	map.addControl(drawControl);
63	+	map.on('draw:created', function (e) {
64	+	var type = e.layerType,
65	+	layer = e.layer;
66	+
67	+	if (type === 'marker') {
68	+	layer.bindPopup('A popup!');
69	+	}
70	+
71	+	drawnItems.addLayer(layer);
72	+	});
73	+
74	+	// 添加量測工具
75	+	L.control.measure({
76	+	primaryLengthUnit: 'kilometers',
77	+	primaryAreaUnit: 'sqmeters',
78	+	activeColor: '#ABE67E',
79	+	completedColor: '#C8F2BE'
80	+	}).addTo(map);
81	+
82	+	// 添加導航路徑
83	+	L.Routing.control({
84	+	waypoints: [
85	+	L.latLng(25.033964, 121.564468),
86	+	L.latLng(25.0375, 121.5637)
87	+	]
88	+	}).addTo(map);
89	+
90	+	// 地圖點擊事件
91	+	function onMapClick(e) {
92	+	alert("你點擊了地圖上的座標：" + e.latlng);
93	+	}
94	+
95	+	map.on('click', onMapClick);
96	+	</script>
97	+
98	+	</body>
99	+	</html>

Próximo Anterior