Почему Leaflet.LayerGroup.Collision не работает с моим L.Geo JSON? - PullRequest
0 голосов
/ 08 февраля 2020

Попытка использовать плагин "Leaflet.LayerGroup.Collision.js". Я не вижу, что это за ошибка, так как она должна скрывать текст при столкновении. Весь текст отображается, но все еще сталкивается друг с другом и выглядит довольно грязно на карте.

Что может быть не так в приведенном ниже примере? Я пытался следовать инструкциям настолько хорошо, насколько это возможно, но, кажется, что-то не хватает!

var point_txt = new L.layerGroup();

function filt_point(feature) {
  if (feature.properties.size === "villages") return true;
}

var collisionLayer = L.LayerGroup.collision({ margin: 8 });

$.getJSON("/data/city_villages.geojson", function(json) {
  var pointLayer = L.geoJSON.collision(null, {
    filter: filt_point,
    pointToLayer: function(feature, latlng) {
      label = String(('<span class="textLabelclassmall">' + feature.properties.Namn + '</span>');
      return new L.marker(latlng, {
        icon: createLabelIcon("textLabelclasssmall", label)
      });
    }
  });

  var createLabelIcon = function(labelClass, labelText) {
    return L.divIcon({
      className: labelClass,
      html: labelText
    });
  };

  pointLayer.addData(json);

  collisionLayer.addLayer(pointLayer);
  collisionLayer.addTo(point_txt);
});

стиль. css:

.textLabelclassmall{
left: 1px;
top: -10px;
background-color: transparent;
display: inline-block;
text-align: left;
white-space:nowrap;
letter-spacing: 0.1em;
font-weight: 500;
font-size: 0.5vw;
}

Ответы [ 2 ]

0 голосов
/ 08 февраля 2020

Я думаю, что я нахожу решение, используя стиль background-colour. css с прозрачным и использую тег <span> для метки в коде js выше. Я обновил до рабочего решения для кода выше.

0 голосов
/ 08 февраля 2020

Экземпляр Leaflet.LayerGroup.Collision ожидает, что добавленные к нему слои будут L.Markers, а не экземпляры L.LayerGroup (или экземпляры производных классов, такие как L.GeoJSON) - он просто не подготовлен для этого варианта использования .

Добавьте отдельные маркеры по мере их создания или используйте вместо этого L.GeoJSON.Collision.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...