Skip to content

Instantly share code, notes, and snippets.

@jinliming2

jinliming2/index.html

Created July 29, 2022 15:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jinliming2/b7971203fadaee86b565579da5477615 to your computer and use it in GitHub Desktop.
Save jinliming2/b7971203fadaee86b565579da5477615 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet 地图，点聚合
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1/dist/MarkerCluster.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1/dist/MarkerCluster.Default.min.css">
<style>
html, body, #map {
width: 100vw;
height: 100vh;
margin: 0;
}
#progress {
height: 8px;
background-color: green;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="progress" class="hide"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1/dist/leaflet.markercluster.min.js"></script>
<script>
// 创建地图
const map = L.map(document.getElementById('map'), {
worldCopyJump: true,
maxBoundsViscosity: 1,
attributionControl: false,
// 中国
center: L.latLng(28.7, 104.31),
zoom: 4,
zoomSnap: .5,
zoomDelta: .5,
layers: [
// L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png?lang=zh', {
// maxZoom: 19,
// attribution: '&copy; <a href="https://maps.wikimedia.org">Wikimedia maps</a>',
// }),
L.tileLayer('https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 18,
attribution: '&copy; <a href="https://geoq.cn">智图</a>',
}),
],
});
// 进度条
const progress = document.getElementById('progress');
// 点聚合
const markers = L.markerClusterGroup({
chunkedLoading: true,
chunkProgress(n, t) {
if (n < t) {
progress.classList.remove('hide');
} else {
progress.classList.add('hide');
}
progress.style.width = `${n / t * 100}%`;
},
}).addTo(map);
// 向地图中添加点（下面两个点是随便输入的），距离近的点会自动聚合
markers.clearLayers().addLayers([
{ P: [34.5, 112.3], N: 'ToolTip', M: `详细说明<br>可用 HTML 语法` },
{ P: [34.5, 113.4], N: 'ToolTip', M: `详细说明<br>可用 HTML 语法` },
].map(data => L.marker(data.P).bindTooltip(data.N).bindPopup(data.M)));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment