Отсутствуют значки по умолчанию Leaflet-markercluster

Значки по умолчанию не отображаются для плагина MarkerCluster после использования IconCreateFunction.

Я хочу использовать значки по умолчанию для плагина, но при использовании прикрепленного кода я теряю все функции значков, я получаю только числа без значков, и если я активирую «childCount», я получаю один тип круга с числами, смещенными от центра внутри значок. Маркеры уже сгруппированы, и я хочу добавить это значение в markercluster, поэтому я использую IconCreateFuncton, чтобы числа на карте отображались правильно, но я потерял все значки и их красивые функции... чего не хватает ?

отсутствуют значки

Результат ниже с использованием "var childCount"

значки, но без стиля и т. д.


$.getJSON("../test/test.geojson", function(json) {

          geoLayer = L.geoJson(json, {

        pointToLayer: function(feature, latlng) {
        var log_p = feature.properties.log_p;

        var marker;

        if (log_p > 0){
            marker = new L.shapeMarker(latlng, {radius: log_p*25, fillColor: '#2b83ba', fillOpacity: 0.5, color: '#000000', weight: 1,  shape: 'circle'});

          }     
            else {
            marker =  null
          }
          return marker;
          },

    onEachFeature: function(feature, layer) {
      var popupText = "Amount per day: " + '<b>' + feature.properties.total + '</b>';

      layer.bindPopup(popupText, {
        closeButton: true,
        offset: L.point(0, -20)
      });
      layer.on('click', function() {
        layer.openPopup();
      });
    },
  });

    var markers = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        var children = cluster.getAllChildMarkers();
        var sum = 0;
        for (var i = 0; i < children.length; i++) {
            sum += children[i].feature.properties.total;
        }

     /*
        var childCount = cluster.getAllChildMarkers();
        var c = ' marker-cluster-';
        if (childCount < 10) {
            c += 'small';
        } else if (childCount < 500) {
            c += 'medium';
        } else {
            c += 'large';
        }
     */
        return new L.DivIcon({ html: '<b>' + sum + '</b>', className: 'marker-cluster'/* + c */, iconSize: new L.Point(40, 40) });
    }
  });
  markers.addLayer(geoLayer)
  map.addLayer(markers);
});

Значки, стили и функции кластера маркеров утеряны.


person QGIS-user    schedule 01.09.2019    source источник


Ответы (1)


Мне удается решить проблему, не хватает нескольких строк кода. Я добавил их в исходный код JavaScript следующим образом.

$.getJSON("../test/test.geojson", function(json) {
  geoLayer = L.geoJson(json, {
    pointToLayer: function(feature, latlng) {
      var log_p = feature.properties.log_p;
      var marker;
      if (log_p > 0) {
        marker = new L.shapeMarker(latlng, {
          radius: log_p * 25,
          fillColor: '#2b83ba',
          fillOpacity: 0.5,
          color: '#000000',
          weight: 1,
          shape: 'circle'
        });

      } else {
        marker = null
      }
      return marker;
    },

    onEachFeature: function(feature, layer) {
      var popupText = "Amount per day: " + '<b>' + feature.properties.total + '</b>';
      layer.bindPopup(popupText, {
        closeButton: true,
        offset: L.point(0, -20)
      });
      layer.on('click', function() {
        layer.openPopup();
      });
    },
  });

  var clusters = new L.MarkerClusterGroup({
    maxClusterRadius: 125,
    iconCreateFunction: function(cluster) {
      var children = cluster.getAllChildMarkers();
      var sum = 0;
      for (var i = 0; i < children.length; i++) {
        sum += children[i].feature.properties.total;
      }

      var childCount = cluster.getChildCount()

      var c = ' marker-cluster-';
      if (childCount + sum <= 50) {
        c += 'small';
      } else if (childCount + sum <= 250) {
        c += 'medium';
      } else {
        c += 'large';
      }

      return new L.DivIcon({
        html: '<div><span>' + sum + '</span></div>',
        className: 'marker-cluster marker-cluster-' + c,
        iconSize: new L.Point(40, 40)
      });
    },

  });
  clusters.addLayer(geoLayer)
  map.addLayer(clusters);
});
person QGIS-user    schedule 02.09.2019