Question

尝试使用插件env。我看不到错误是什么，因为应该在发生冲突时隐藏文本。所有文字都显示了，但仍然相互碰撞，在地图上看起来很乱。

以下示例可能有什么问题？我已尝试按照说明进行操作，但似乎缺少一些东西！

"Leaflet.LayerGroup.Collision.js"

style.css：

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);
});

Answer 1

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

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

Answer 2

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

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

2 个答案: