Leaflet Marker的突出显示，以及聚合

本章主要是介绍一下在众多marker中如何突出显示其中一个，以及海量marker时，如何把距离相近的marker汇聚成一个。

目录

一、marker的突显

1、setOpacity 

2、Leaflet.SmoothMarkerBouncing 

二、maker的聚合

leaflet 详解总目录：传送

一、marker的突显

这里就就介绍2种我平时用的多的：1、marker的闪烁，通过marker的一闪一闪来突出该marker；2、marker的跳动，让marker跳动起来，这样就能突出该marker了。

1、setOpacity 

通过修改marker的透明度来实现marker的闪烁，简单省事，一个定时器就能解决问题，不过在取消定时器时要把marker恢复原状

2、Leaflet.SmoothMarkerBouncing 

插件安装：

npm install leaflet.smooth_marker_bouncing

或

<script type="text/javascript"
  src="https://cdn.jsdelivr.net/gh/hosuaby/Leaflet.SmoothMarkerBouncing@v3.0.3/dist/bundle.js"
        crossorigin="anonymous"></script> 

 这个插件使用不麻烦，直接上代码，更直观

 <div class="map" id="map_container"></div>

import SmoothMarkerBouncing from 'leaflet.smooth_marker_bouncing'
import L from 'leaflet';
SmoothMarkerBouncing(L)

//初始化地图
initMap() {
      let that = this;
      that.map = L.map("map_container", {
        crs: L.CRS.EPSG4326, //坐标系,在未知坐标系情况下，不要修改这里  EPSG4326  EPSG3857
        center: [29.4785541, 119.55847441], //地图中心
        maxNativeZoom: 16, //地图瓦片放大最大级别
        minNativeZoom: 5, //地图瓦片缩小最小级别
        maxZoom: 21, //地图放大最大级别
        minZoom: 5, //地图缩小最小级别
        zoom: 10, //地图当前级别
      });
     that.addMarkerLayer()
    },

//添加marker
addMarkerLayer(){
    let marker = L.marker([29.4765541, 119.55847441],{title:'marker'}).addTo(this.map);
    marker.on('click',(e) =>{
        if(e.target.isBouncing()){
          e.target.stopBouncing()
        }else{
          e.target.bounce()
        }
      })
}

 属性：

单个marker方法：

 所有跳动maker方法：

效果如下：

二、maker的聚合

leaflet 添加海量marker，地图缩放时，为保持地图整洁使用Leaflet.markercluster这个插件

 npm install leaflet.markercluster

import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'


//方法
addClusterMarker(){
      let markers = new L.MarkerClusterGroup({
        showCoverageOnHover:true,//默认true，鼠标移到集合上时，是否显示边界
        zoomToBoundsOnClick:true,//默认true，点击集合，缩放地图
        spiderfyOnMaxZoom:true,//默认true，在地图最大级别时，点击集合，集合中的marker会以蛛网方式分散
        removeOutsideVisibleBounds:true,//默认true，在远离视窗的marker或集合会被移除
        spiderLegPolylineOptions:{weight: 1.5, color: '#222', opacity: 0.5},//在地图最大级别时，蛛网线条的样式，可以根据polyline的属性
        iconCreateFunction:function(e){
          //每次被创建一个集合都会触发该方法
          //getChildCount 和 getAllChildMarkers 这两个方法可以获取子集marker的数量
        },
        spiderfyShapePositions:function(count,centerPt){
          //这里是自定义蛛网，大家有需要的可以自行研究
        },
        //还有其他的一些方法，这里就不过多讲述了
      })
      this.map.addLayer(markers)
      markers.on('click',(e) =>{
        console.log(e,'click')
      })
      markers.on('clusterclick',(e) =>{
        console.log(e,'clusterclick')
      })
      for(var i = 0;i<20;i++){
        let lat = 29.4785541 - i * 0.002
        for (let index = 0; index < 20; index++) {
           let lng = 119.55847441 + index * 0.002
           let marker = new L.Marker([lat,lng])
           markers.addLayer(marker)
        }
      }
    }

 这个插件简单的使用还是很不错的，如果需要自定义，可以查看文档

效果如下

 关于leaflet更多的插件，大家可以到官网上查看，学习：leaflet 插件