Question

执行代码时，我们可以看到计数为3的集群视图。单击集群后，它会放大到最大缩放级别并显示计数为3的集群视图。在此最大缩放级别中，我想显示标记图标组，而不是带有计数3的群集视图。单击标记图标组后，它应开始爬行。

<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>

Answer 1

有iconCreateFunction个您可以使用它并添加您的图像，它实际上用您自己的HTML替换了您提供的html，我刚刚添加了一种添加方式，在html中您可以添加anytihng。 Here是它的文档。

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

演示：

.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>

Markercluster spiderfy-“地图最大缩放”级别显示标记图标组，而不是带计数的群集视图

1 个答案: