leaflet.js Масштабировать выбранную функцию, а затем панорамировать вправо

Я хотел бы иметь возможность приспосабливать Bounds к объекту, когда вы нажимаете на него, но когда он увеличивается, я бы хотел, чтобы он учитывал слой управления, который появится после увеличения, и увеличивайте масштаб примерно на 150 пикселей. слева. В настоящее время я могу выполнить это с помощью следующего кода, но, к сожалению, это не плавное масштабирование, потому что мой текущий метод будет масштабировать с использованием fitBounds, а затем после масштабирования он использует panBy для панорамирования на 150 пикселей влево. Это было бы не так плохо, если бы панорамирование было плавным, возможно, после ожидания в 250 мс. В идеале я хотел бы иметь возможность выполнять некоторые математические операции с границами, переданными методу fitBounds, чтобы просто учитывать сдвиг на 150 пикселей влево.

Вот пример того, что у меня сейчас работает.

Вот упрощенная версия кода, который я использую: (вы можете нажать здесь для полностью рабочей версии со всем исходным кодом)

при нажатии

function clickFeature(e) {
  var layer = e.target;

  map.fitBounds(layer.getBounds());
}

карта в zoomEnd:

map.on({
  zoomend: function() {
    map.panBy([150, 0]);
  }
});

Итак, я добился желаемой функции, но это просто не гладко.

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


person Jeremy Iglehart    schedule 09.02.2013    source источник


Ответы (2)


Прежде всего, вы можете управлять анимацией с помощью параметров панорамирования. Это может помочь вам сделать переход более плавным. Вы можете увидеть эти здесь.

Во-вторых, вы можете рассчитать необходимое смещение, используя функции преобразования. Их можно увидеть здесь.

Например, вы можете сделать что-то вроде (внезапно) использовать getBoundsZoom для объекта карты на границах полигона, чтобы определить ваше будущее масштабирование, затем использовать это масштабирование в функции проекта с полигоном и создать новый LatLngBound из граница полигона, которая немного смещена.

Надеюсь это поможет!

person hassassin    schedule 09.09.2013
comment
Если кто-нибудь прокомментирует здесь - я так давно не пользовался листовкой. Я приму ответ, если кто-то предложит, какой из них правильный. - person Jeremy Iglehart; 28.05.2016
comment
Я думаю, что оба правильны. Вы можете либо рассчитать новые границы самостоятельно, как я упоминал, либо использовать заполнение (которое находится в параметрах анимации, которые я связал) - person hassassin; 01.06.2016
comment
Спасибо за ответ @hassassin, я выбрал ваш ответ как правильный. - person Jeremy Iglehart; 08.06.2016

У меня была такая же проблема, и если бы это было проще, чем я думал! Вы можете установить отступы для метода fitBounds (и всех методов панорамирования/масштабирования, если на то пошло)

http://leafletjs.com/reference.html#map-fitboundsoptions

so:

map.fitBounds(layer.getBounds(),{paddingBottomRight:[150,0]});
person abenrob    schedule 24.04.2014
comment
Если кто-нибудь прокомментирует здесь - я так давно не пользовался листовкой. Я приму ответ, если кто-то предложит, какой из них правильный. - person Jeremy Iglehart; 28.05.2016