在Leaflet中更改缩放级别时的工具提示移动

Question

我在地图中使用“永久工具提示”作为标签，如下所示：

layer.bindTooltip(layer.feature.properties.Label, {offset: L.point(0, 170), direction: 'bottom', permanent:true }).openTooltip(); 

结果很好，你可以在这里看到：

但是，当我更改缩放级别时，它会变得如下：

有什么想法解决它吗？

Answer 1

解决此问题的唯一方法是创建一个指向每行末尾的新点图层（Marker）。然后将工具提示分配给点。像这样的东西：

$.ajax({
dataType: "json",
url: "...",
success: function (earthquake) {
    PointLayer= L.geoJSON(earthquake, {
        style: function (feature) {
            return {
                color: '#000',
                opacity: 1
            };
        },
        pointToLayer: function (feature, latlong) {
            return L.circle(latlong, 0);
        },
        onEachFeature: function (feature, layer) {
            layer.bindTooltip(layer.feature.properties.PanelName, { offset: L.point(0, 0), direction: 'bottom', permanent: true, className: 'AAAA', direction:'left' }).openTooltip();
        }
    }).addTo(map);

请注意，您应该指定一个HTML类（即AAAA）来更改工具提示格式（删除背景颜色，....）。另外要删除工具提示方向的小三角形，您应该添加一个新的CSS语句，如下所示：

.AAAA {
box-shadow:none;
border:none;
background-color:transparent;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}