Markercluster spiderfy - Map max zoom level displays the marker icon groups instead of cluster view with count

问题

When executing the code, we can see the cluster view with count 3. After clicking on the cluster, It zooms into the max zoom level and displays the cluster view with count 3. In this max zoom level, I wanted to display the marker icon groups instead of the cluster view with count 3. After click on the marker icon groups, It should spiderfy.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
</head>

<body>
  <h1>Leaflet Cluster Example</h1>

  <p>Here's an interactive map indicating where airports and train stations are located around the world. The data comes from <a href="http://openflights.org/data.html" target="_blank">OpenFlights.org</a>.

    <div id="map" style="width: 800px; height: 500px; border: 1px solid #AAA;"></div>

    <script type="text/javascript">
      var markers = [{
        "name": "Goroka",
        "city": "Goroka, Papua New Guinea",
        "iata_faa": "GKA",
        "icao": "AYGA",
        "lat": 38.98856,
        "lng": -77.32219,
        "alt": 5282,
        "tz": "Pacific/Port_Moresby"
      }, {
        "name": "Madang",
        "city": "Madang, Papua New Guinea",
        "iata_faa": "MAG",
        "icao": "AYMD",
        "lat": 38.98856,
        "lng": -77.32219,
        "alt": 20,
        "tz": "Pacific/Port_Moresby"
      }, {
        "name": "Mount Hagen",
        "city": "Mount Hagen, Papua New Guinea",
        "iata_faa": "HGU",
        "icao": "AYMH",
        "lat": 38.98852,
        "lng": -77.32183,
        "alt": 5388,
        "tz": "Pacific/Port_Moresby"
      }];

      var map = L.map('map', {
        center: [10.0, 5.0],
        minZoom: 2,
        maxZoom: 18,
        zoom: 2
      });

      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a', 'b', 'c']
      }).addTo(map);

      var myIcon = L.icon({
        iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
        iconSize: [29, 24],
        iconAnchor: [9, 21],
        popupAnchor: [0, -14]
      });

      var markerClusters = L.markerClusterGroup();

      for (var i = 0; i < markers.length; ++i) {
        var popup = markers[i].name +
          '<br/>' + markers[i].city +
          '<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
          '<br/><b>ICAO:</b> ' + markers[i].icao +
          '<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
          '<br/><b>Timezone:</b> ' + markers[i].tz;

        var m = L.marker([markers[i].lat, markers[i].lng], {
            draggable: true,
            icon: myIcon
          })
          .bindPopup(popup);

        markerClusters.addLayer(m);

      }

      markerClusters.on("clusterclick", function(c) {
        var cluster = c.layer,
          bottomCluster = cluster;

        while (bottomCluster._childClusters.length === 1) {
          bottomCluster = bottomCluster._childClusters[0];
        }

        if (bottomCluster._zoom === markerClusters._maxZoom &&
          bottomCluster._childCount === cluster._childCount) {

          c.layer.zoomToBounds();
        }

      });

      map.addLayer(markerClusters);
    </script>
</body>

回答1:

There is iconCreateFunction you can use it and add your image, it actually replaces the html you provided with its own, I have just added a way how you can add it, in html you can add anytihng. Here is a documentation of it.

 var markerClusters = L.markerClusterGroup({iconCreateFunction: function(cluster) {
        return L.divIcon({ html: '<div class="markerImage">' + cluster.getChildCount() + '</div>' });
    }});

Demo:

.markerImage{
  
background-image:url("https://image.shutterstock.com/image-vector/map-pin-flat-design-style-450w-627403736.jpg");
background-size: cover;
    border: 0;
    background-color: transparent;
    width: 100px;
    height: 100px;
}

.leaflet-marker-icon{
background:transparent !important;
border:0px !important;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js'></script>
</head>

<body>
  <h1>Leaflet Cluster Example</h1>

  <p>Here's an interactive map indicating where airports and train stations are located around the world. The data comes from <a href="http://openflights.org/data.html" target="_blank">OpenFlights.org</a>.

    <div id="map" style="width: 800px; height: 500px; border: 1px solid #AAA;"></div>

    <script type="text/javascript">
      var markers = [{
        "name": "Goroka",
        "city": "Goroka, Papua New Guinea",
        "iata_faa": "GKA",
        "icao": "AYGA",
        "lat": 38.98856,
        "lng": -77.32219,
        "alt": 5282,
        "tz": "Pacific/Port_Moresby"
      }, {
        "name": "Madang",
        "city": "Madang, Papua New Guinea",
        "iata_faa": "MAG",
        "icao": "AYMD",
        "lat": 38.98856,
        "lng": -77.32219,
        "alt": 20,
        "tz": "Pacific/Port_Moresby"
      }, {
        "name": "Mount Hagen",
        "city": "Mount Hagen, Papua New Guinea",
        "iata_faa": "HGU",
        "icao": "AYMH",
        "lat": 38.98852,
        "lng": -77.32183,
        "alt": 5388,
        "tz": "Pacific/Port_Moresby"
      }];

      var map = L.map('map', {
        center: [10.0, 5.0],
        minZoom: 2,
        maxZoom: 18,
        zoom: 2
      });

      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a', 'b', 'c']
      }).addTo(map);

      var myIcon = L.icon({
        iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
        iconSize: [29, 24],
        iconAnchor: [9, 21],
        popupAnchor: [0, -14]
      });

      var markerClusters = L.markerClusterGroup({iconCreateFunction: function(cluster) {
		return L.divIcon({ html: '<div class="markerImage">' + cluster.getChildCount() + '</div>' });
	}});

      for (var i = 0; i < markers.length; ++i) {
        var popup = markers[i].name +
          '<br/>' + markers[i].city +
          '<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
          '<br/><b>ICAO:</b> ' + markers[i].icao +
          '<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
          '<br/><b>Timezone:</b> ' + markers[i].tz;

        var m = L.marker([markers[i].lat, markers[i].lng], {
            draggable: true,
            icon: myIcon
          })
          .bindPopup(popup);

        markerClusters.addLayer(m);

      }

      markerClusters.on("clusterclick", function(c) {
        var cluster = c.layer,
          bottomCluster = cluster;

        while (bottomCluster._childClusters.length === 1) {
          bottomCluster = bottomCluster._childClusters[0];
        }

        if (bottomCluster._zoom === markerClusters._maxZoom &&
          bottomCluster._childCount === cluster._childCount) {

          c.layer.zoomToBounds();
        }

      });

      map.addLayer(markerClusters);
    </script>
</body>

来源：https://stackoverflow.com/questions/53557028/markercluster-spiderfy-map-max-zoom-level-displays-the-marker-icon-groups-inst

标签

javascript

leaflet

leaflet.markercluster