leaflet点聚合效果

这篇笔记就是github上的一个例子：https://github.com/Leaflet/Leaflet.markercluster

个人把例子里的插件保存在了github仓库：https://goldmemory.github.io/MarkerCluster.zip

代码：

<!DOCTYPE html>
<html><head><title>Leaflet debug page</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" /><script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script><link rel="stylesheet" href="css/screen.css" /><link rel="stylesheet" href="css/MarkerCluster.css" /><link rel="stylesheet" href="css/MarkerCluster.Default.css" /><script src="js/leaflet.markercluster-src.js"></script><script src="js/realworld.388.js"></script></head><body><div id="map"></div><span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span><script type="text/javascript">var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'}),latlng = L.latLng(-37.82, 175.24);var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});var markers = L.markerClusterGroup();for (var i = 0; i < addressPoints.length; i++) {var a = addressPoints[i];var title = a[2];var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });marker.bindPopup(title);markers.addLayer(marker);}map.addLayer(markers);</script></body>
</html>

效果：

leaflet点聚合效果相关推荐

LeaFlet学习之聚合效果
leaflet实现聚合效果是通过插件进行的,虽然leaflet是轻量级的但是,许多功能都是没有依赖插件来完成,关于这有缺点也有有点,通过这几天对leaflet感觉一直都在依靠插件完成,本身就两个主题类 ...
Leaflet中使用markerCluster实现点聚合效果
场景 Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标: Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
vue+openlayer实现地图聚合效果和撒点效果
前言: openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3, 风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在vue中引入o ...
Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
高德地图的点聚合效果下的点的添加和删除
点聚合实现最近做项目一直在和高德地图打交道...坑坑坑打点一旦多,对于密集恐惧症的人来说就是一场灾难,所以官方给出了解决方案---点聚合. 在地图打点就这样轻松实现 marker = new AM ...
Openlayers：点聚合效果
最近在项目中遇到公共设施点撒点的需求,原始加载思路是:创建一个Vector矢量图层作为容器,然后通过Ajax请求后端接口拿到设施点数据源,再构建features数组,以单个点的形式在图层中进行展示.但 ...
【GIS小案例】点聚合效果的实现
1,效果图 2,实现代码 <script>var viewer = new Cesium.Viewer('cesiumContainer');viewer.scene.open(" ...
高德地图, 点聚合效果，以及给点添加点击事件
这个试用于高德地图, 首先要调用方法 'AMap.MarkerCluster', if (clusters) { clusters.setMap(null) } clusters = new VueA ...

leaflet点聚合效果

代码：

效果：

leaflet点聚合效果相关推荐

最新文章

热门文章