【HMWeb】HTML使用Leaflet实现本地离线地图Gis应用
<!DOCTYPE html>
<html>
<head>
<title>HMWeb 地图应用</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://localhost:8080/leaflet-{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '地图数据 © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
L.marker([51.505, -0.09]).addTo(map)
.bindPopup('Hello World!')
.openPopup();
</script>
</body>
</html>这段代码展示了如何使用Leaflet在HTML页面中嵌入一个地图，并且设置了地图的中心点、缩放级别以及一个标记和弹窗。在本地服务器上，它假设有一个提供离线地图切片的服务运行在端口8080。请注意，这只是一个示例，并且需要根据实际部署的服务进行相应的调整。
评论已关闭