# leaflet.collisionmarkers

**Repository Path**: panzhiyue/leaflet.collisionmarkers

## Basic Information

- **Project Name**: leaflet.collisionmarkers
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-21
- **Last Updated**: 2021-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Leaflet-CollisionMarkers

有时我们要在地图上添加许多点图标，当点数过多时密密麻麻一片，很不好看。这时我们需要隐藏部分图标，放大地图时再展示出来，提高用户体验。 [demo](http://examples.panzhiyue.website/Leaflet-CollisionMarkers/example/index.html)

## 示例 

```javascript
    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加载

![image-20211021143507300](README/image-20211021143507300.png)

### 2.使用L.LayerGroup加载

![image-20211021143439251](README/image-20211021143439251.png)

## 方法

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



## L.Marker扩展

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

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