leaflet实现点位聚合

1、引入聚合插件及相应的样式文件

js插件:https://download.csdn.net/download/qq_48795482/90404737

样式文件1:https://download.csdn.net/download/qq_48795482/90404741

样式文件2:https://download.csdn.net/download/qq_48795482/90404743

html 复制代码
<script src="/mapLib/leaflet.markercluster.js"></script>
    <link rel="stylesheet" type="text/css" href="/mapLib/MarkerCluster.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/mapLib/MarkerCluster.Default.css"
    />

2、调用插件函数得到聚合图层

javascript 复制代码
this.clusterLayer = L.markerClusterGroup();

3、将相应的marker或者geojson的点图层添加到聚合图层中,点位会自动实现聚合。

javascript 复制代码
that.clusterLayer.addLayer(that.geoJSONLayer[id]);
相关推荐
码界领航8 分钟前
【2025最新版】Chrome谷歌浏览器如何能恢复到之前的旧版本
前端·chrome
乐多_L1 小时前
使用vue3框架vue-next-admin导出表格excel(带图片)
前端·javascript·vue.js
南望无一1 小时前
React Native 0.70.x如何从本地安卓源码(ReactAndroid)构建
前端·react native
Mike_188702783511 小时前
1688代采下单API接口使用指南:实现商品采集与自动化下单
前端·python·自动化
鲨鱼辣椒️面1 小时前
HTML视口动画
前端·html
一小路一1 小时前
Go Web 开发基础:从入门到实战
服务器·前端·后端·面试·golang
堇舟1 小时前
HTML第一节
前端·html
纯粹要努力1 小时前
前端跨域问题及解决方案
前端·javascript·面试
小刘不知道叫啥2 小时前
React源码揭秘 | 启动入口
前端·react.js·前端框架
kidding7232 小时前
uniapp引入uview组件库(可以引用多个组件)
前端·前端框架·uni-app·uview