@panzhiyue/leaflet.collisionmarkers

Leaflet-CollisionMarkers

有时我们要在地图上添加许多点图标，当点数过多时密密麻麻一片，很不好看。这时我们需要隐藏部分图标，放大地图时再展示出来，提高用户体验。 demo

示例

    var map = L.map('map').setView([59.9578, 30.2987], 10);
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      preferCanvas: true
    }).addTo(map);

    var icon = L.icon({
      iconUrl: 'img/pothole.png',
      iconSize: [20, 18],
      iconAnchor: [10, 9]
    });

    var markers = [];
    for (var i = 0; i < 2000; i++) {
      var marker = L.marker([58.5578 + Math.random() * 1.8, 29.0087 + Math.random() * 3.6], {
        icon: icon,
        zIndex:i,    //堆叠顺序，值越大则优先显示
        collisionScale:2   //碰撞范围缩放比例
      }).bindPopup("I Am " + i);
      markers.push(marker);
    }

    var collisionLayer = L.collisionMarkers(markers).addTo(map);

效果图

1.使用L.CollisionMarkers加载

2.使用L.LayerGroup加载

方法

• addLayer(marker,collision)：向图层添加标记。collision为true时删除后直接重新检测,默认为false
• removeLayer(marker,collision)：从图层中删除一个标记。collision为true时删除后直接重新检测,默认为false
• collision() : 碰撞检测

L.Marker扩展

collisionScale：设置标记的碰撞范围缩放比例,默认值为1,范围是marker的dom元素实际宽高,设置为其他值则按照设置的值进行缩放。我们可以给比较重要的marker设置更大的值，使它更明显。

zIndex:设置marker的堆叠顺序。拥有更高堆叠顺序的元素总是会优先显示。