为什么 Leaflet.LayerGroup.Collision 不能与我的 L.GeoJSON 一起使用？

Question

正在尝试使用插件 "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);
});

style.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;
}

Answer 1

Leaflet.LayerGroup.Collision 的实例期望添加到自身的层是 L.Markers，而不是 L.LayerGroup 的实例（或派生的类的实例，例如 L.GeoJSON) - 它根本没有为该用例做好准备。

在创建单个标记时添加它们，或者考虑改用 L.GeoJSON.Collision。

Answer 2

我想我找到了一个解决方案，方法是在 style.css 中使用 background-colour 透明，并在上面的 js 代码中使用 <span>tag 作为标签。我已经更新到上面代码的工作解决方案。

为什么 Leaflet.LayerGroup.Collision 不能与我的 L.GeoJSON 一起使用？

Why does Leaflet.LayerGroup.Collision not work with my L.GeoJSON?

javascript

text

collision-detection

leaflet