Leaflet 互動地圖應用

修正履歴 081a5c96d6b8f7ed8c623370221493801a6f6b39

leaflet_map_with_tools.html · 3.2 KiB · HTML Raw

<!DOCTYPE html> <html> <head> <title>Leaflet 地圖範例</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" /> <style> #mapid { height: 600px; } </style> </head> <body> <div id="mapid"></div> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script> <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script> <script src="https://unpkg.com/leaflet-measure/dist/leaflet-measure.js"></script> <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script> <script> // 初始化地圖，設置中心點和縮放級別 var map = L.map('mapid').setView([25.033964, 121.564468], 13); // 添加不同的圖層 var streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var satelliteLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { attribution: 'Map data: © <a href="https://www.opentopomap.org/">OpenTopoMap</a> contributors' }); // 添加圖層控制 var baseMaps = { "街道圖": streetLayer, "衛星圖": satelliteLayer }; L.control.layers(baseMaps).addTo(map); // 添加標記群集 var markers = L.markerClusterGroup(); markers.addLayer(L.marker([25.033964, 121.564468]).bindPopup("台北 101")); markers.addLayer(L.marker([25.0375, 121.5637]).bindPopup("圓形範圍")); markers.addLayer(L.marker([25.0324, 121.5574]).bindPopup("多邊形範圍")); map.addLayer(markers); // 添加地理搜尋 var geocoder = L.Control.geocoder().addTo(map); // 添加繪圖工具 var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems } }); map.addControl(drawControl); map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; if (type === 'marker') { layer.bindPopup('A popup!'); } drawnItems.addLayer(layer); }); // 添加量測工具 L.control.measure({ primaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters', activeColor: '#ABE67E', completedColor: '#C8F2BE' }).addTo(map); // 添加導航路徑 L.Routing.control({ waypoints: [ L.latLng(25.033964, 121.564468), L.latLng(25.0375, 121.5637) ] }).addTo(map); // 地圖點擊事件 function onMapClick(e) { alert("你點擊了地圖上的座標：" + e.latlng); } map.on('click', onMapClick); </script> </body> </html>

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>
100