Создайте фиксированный прямоугольный слой поверх базовой карты с помощью Leaflet.

Мне удалось добавить слой поверх базовой карты, и он выглядит так: Я сделал этот прямоугольник путем прямого изменения стиля с помощью jQuery - width, height и overflow:hidden. Я не уверен, что это правильный способ сделать это, пожалуйста, сообщите, если есть лучшие способы.

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

-webkit-transform: translate3d(185px, 178px, 0) (Я в Chrome) Таким образом, установка top: 0 и left: 0 не помогает, и прямоугольник перемещается вместе с картой при панорамировании, как будто он прилип к карте.

Я уверен, что кто-то имел дело с той же задачей, поэтому, пожалуйста, посоветуйте мне.

ОБНОВЛЕНИЕ: я добавил скрипту, которая лучше иллюстрирует мою проблему:

Прямоугольный верхний слой


javascript html css maps leaflet
person Sergei Basharov    schedule 01.03.2013    source источник
comment
Не могли бы вы добавить jsfiddle.net   -  person howderek    schedule 01.03.2013
comment
Добавлена ​​скрипка, смотрите обновление. Я использую один и тот же поставщик карт в скрипке для обоих слоев, в реальном мире они будут разными.   -  person Sergei Basharov    schedule 01.03.2013
comment
Рассматривали ли вы возможность добавления пользовательского элемента управления? leafletjs.com/reference.html#icontrol   -  person flup    schedule 01.03.2013

Ответы (1)


arrow_upward
4
arrow_downward

Предложение №1

Вы можете создать маску clip и изменить ее rect в направлении, противоположном панорамированию.

Что-то вроде http://jsfiddle.net/gaby/dgWZk/23/

var overlay = {
    top: 50,
    left: 50,
    width: 200,
    height: 200
}

map.on('move', repositionMask) ;

map.fire('move');


function repositionMask() {
    var po = map.getPixelOrigin(),
        pb = map.getPixelBounds(),
        offset = map.getPixelOrigin().subtract(map.getPixelBounds().min);

    $(layer02._container).css({
        clip: 'rect(' + (overlay.top - offset.y) + 'px,' + (overlay.left + overlay.width - offset.x) + 'px,' + (overlay.top + overlay.height - offset.y) + 'px,' + (overlay.left - offset.x) + 'px)'
    });
}

Проблема в том, что методы листовки не раскрывают переменные анимации при панорамировании с инерцией, и поэтому мы пока не можем имитировать это... поэтому я отключил inertia карты..

Также проблема с увеличением/уменьшением масштаба заключается в том, что во время анимации маска также увеличивается/уменьшается (но исправляется после завершения анимации, или вы также можете установить zoomAnimation:false)

Предложение №2

Альтернативным решением является создание второй карты и ее наложение/синхронизация.

что-то вроде http://jsfiddle.net/gaby/dgWZk/24/

<div id="container">
    <div id="map"></div>
    <div id="overlay"></div>
</div>

с

#container {
    position:relative;
    height:500px;
}
#map {
    height: 500px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#overlay {
    width: 200px;
    height: 200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px;
    margin-top:-200px;
    outline:1px solid green;
    pointer-events:none;
}

и

var map = new L.map('map',{
    inertia:false
}).setView([51.505, -0.09], 13);
var overlay = new L.map('overlay', {
    zoomControl: false,
    inertia: false,
    keyboard: false,
    dragging: false,
    scrollWheelZoom: false,
    attributionControl:false,
    zoomAnimation:false
}).setView([51.505, -0.09], 13);
var layer01 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);


var layer02 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg').addTo(overlay);


map.on('move', function () {
    var offset = overlay._getNewTopLeftPoint(map.getCenter()).subtract(overlay._getTopLeftPoint()).subtract([100,100]);
    overlay.fire('movestart');
    overlay._rawPanBy(offset);
    overlay.fire('move');
    overlay.fire('moveend');
}).on('zoomend', function () {
    overlay.setView(map.getCenter(), map.getZoom(), true);
    map.fire('move');
});

$(window).resize(function () {
    overlay.setView(map.getCenter(), map.getZoom());
    map.fire('move');
});
map.fire('move');
person Gabriele Petrioli    schedule 10.05.2013