当前位置：首页 > news >正文

Leaflet 综合案例-聚类图层控制

news 2025/7/30 15:42:48

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

Leaflet 综合案例-聚类图层控制

Vue 3 + Leaflet 实现的 WebGIS 应用提供了完整的聚类图层控制功能

主要功能

在这里插入图片描述

MP4效果动画链接地址

技术栈

该环境下代码即拿即用

Vue 3.5.13+
Leaflet 1.9.4
Vite 6.3.5+

插件

使用 Leaflet 插件 Leaflet.markercluster 实现聚类图层

npm install leaflet.markercluster

<template><div class="map-wrapper"><div id="map-cluster" class="map-container"></div></div>
</template><script setup>
import { onMounted, onUnmounted } from "vue";
import "leaflet/dist/leaflet.css";
import "leaflet.markercluster/dist/MarkerCluster.css"; // 聚合插件的CSS
import "leaflet.markercluster/dist/MarkerCluster.Default.css"; // 聚合插件默认主题CSS
import L from "leaflet";
import "leaflet.markercluster"; // 引入聚合插件JSlet map = null;
let markers = null;const initialView = [39.909186, 116.397479];
const initialZoom = 10; // 初始缩放级别稍微小一点，更容易看到聚合效果onMounted(() => {map = L.map("map-cluster").setView(initialView, initialZoom);L.tileLayer("https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{maxZoom: 18,minZoom: 3,attribution: '&copy; <a href="https://www.amap.com/">高德地图</a>',}).addTo(map);// 创建一个标记点聚合图层markers = L.markerClusterGroup();// 随机生成1000个标记点const dummyMarkers = [];for (let i = 0; i < 1000; i++) {const lat = 39.909186 + (Math.random() - 0.5) * 0.5; // 在中心点附近随机生成const lng = 116.397479 + (Math.random() - 0.5) * 0.5;const marker = L.marker([lat, lng]).bindPopup(`标记点 ${i + 1}`);dummyMarkers.push(marker);}// 将所有标记点添加到聚合图层markers.addLayers(dummyMarkers);map.addLayer(markers);// 调整地图视图以适应所有标记点（可选，如果标记点范围很大）// map.fitBounds(markers.getBounds());
});onUnmounted(() => {if (map) {map.remove();map = null;markers = null;}
});const resetMapView = () => {if (map) {map.setView(initialView, initialZoom);}
};
</script><style scoped>
/* 样式与上一个案例类似，确保布局一致 */
.map-wrapper {display: flex;flex-direction: column;height: 100vh;width: 100vw;font-family: sans-serif;box-sizing: border-box;
}@media (min-width: 768px) {.map-wrapper {flex-direction: row;}
}.map-container {flex-grow: 1;height: 100%;min-height: 300px;background-color: #e0e0e0;
}
</style>

查看全文

http://www.dtcms.com/a/302523.html