Движение всплывающей подсказки при изменении уровня масштабирования в Leaflet - PullRequest
Новая
       13

Движение всплывающей подсказки при изменении уровня масштабирования в Leaflet

0 голосов
/ 02 марта 2019

Я использую «Постоянную подсказку» в качестве ярлыка на моей карте следующим образом: 

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

Результат хорош, как вы можете видеть здесь:

enter image description here

Однако, когда я изменяю уровень масштабирования, он запутывается следующим образом:

enter image description here

Любая идея исправить это

1 Ответ

0 голосов
/ 05 марта 2019

Единственный способ решить эту проблему - создать новый точечный слой (Маркер), который указывает конец каждой линии.Затем назначьте подсказку для точек.Примерно так: 

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