LeafletJS рендеринг с раздавленными плитками - PullRequest
Новая
       17

LeafletJS рендеринг с раздавленными плитками

0 голосов
/ 04 октября 2019

Я использую LeafletJS для отображения карт в нескольких местах на моем сайте.

В большинстве случаев все работает нормально, но на одной конкретной странице я получаю странный сбой при рендеринге, который выглядиткак это:

LeafletJS rendering glitch: Notice the vertical grey lines

Как видите, карта отображается с вертикальными серыми полосами на каждой границе тайла. Кроме того, если я добавлю маркеры на карту, они также будут отображаться в виде сквоша.

Странно то, что я использую тот же код (то есть тот же файл JS) для рендеринга похожих карт на других страницах без каких-либопроблемы. Я также использую аналогичный код для рендеринга двух других карт на той же странице, опять же без проблем.

Код JS выглядит следующим образом: 

(function(L) {
    var element = document.querySelector('.details-map');
    if (!element) { return; }
    var coords = element.getAttribute('data-coords');
    var latlng = coords.split(',');
    var location = {lat: parseFloat(latlng[0]), lng: parseFloat(latlng[1])};

    var zoom = element.getAttribute('data-zoom');

    var map = new L.Map(element, {center: location, zoom: zoom, gestureHandling: true});
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
    }).addTo(map);
})(L);

И связанный HTML-код выглядит следующим образом: 

<div class="details-map" data-coords="51.5216,-0.71998" data-zoom="14"></div>

Ошибка рендеринга возникает при всех уровнях масштабирования и сохраняется после выполнения таких действий, как map.invalidateSize(), чтобы вызвать перерисовку.

Может кто-нибудь объяснить, почему я получаю этот глюк икак это исправить? Спасибо.

1 Ответ

2 голосов
/ 04 октября 2019

После долгих поисков я наконец решил это.

Проблема заключалась в том, что CSS был связан с элементом на некотором расстоянии дальше по дереву DOM и не имел отношения к карте. Это выглядит так: 

.local-branch img {
    vertical-align: top;
    display: inline-block;
    width: 25%;
    padding: 0 10px;
}

Цель этого CSS - выложить набор изображений, связанных с веткой. Карта будет добавлена ​​позже как часть сведений о филиале в элементе .local-branch. Очевидно, что стили не предназначены для применения к карте, но применяются в любом случае, поскольку селектор CSS слишком широк.

Мне нужно будет найти способ исправить это, не нарушая существующий макет изображения, который все еще нуждается в некоторой мысли, но, по крайней мере, я понял, что происходит, поэтому тайна раскрыта.

...