Попытка использовать плагин "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;
}