Достижение анимированного увеличения с помощью d3 и листовки

Использование d3 для построения артефактов SVG поверх карты Листов - это простой способ получить сплошной контроллер карты в сочетании с силой d3. Существует множество примеров и руководств по достижению этого, и два основных подхода:

Добавление нового элемента SVG на панели перекрытия листов, как показано Бостоком здесь: http://bost.ocks.org/mike/leaflet/
Реализация настраиваемого слоя векторной плитки, который перехватывает экосистему слоя на основе древесных плиток Leaflets, как показано Нельсоном Минаром здесь: http://bl.ocks.org/NelsonMinar/5624141
/li >

В первом подходе избегается масштабирование на основе шкалы Leaflets путем присоединения класса листовок, чтобы любые d3-элементы были скрыты при масштабировании. Когда анимация масштабирования закончена, координаты элемента пересчитываются и перерисовываются, после чего скин-класс удаляется, чтобы снова отобразить элементы. Это работает, но дает менее чистый эффект увеличения/уменьшения, чем у слоя Leolet native GeoJSON, поскольку последний поддерживает анимированное масштабирование.

Второй подход не содержит какого-либо конкретного кода реализации, который ссылается на поведение масштабирования, но как-то работает! Элементы d3 масштабируются во время анимированного масштабирования, а затем аккуратно заменяются следующими векторами уровня масштабирования.

То, что я хотел бы достичь, - это комбинация двух. Я хотел бы построить нетекущие векторы на основе Geo/TopoJSON, которые анимируются во время увеличения/уменьшения масштаба. Я работал с разными классами css-листов, различными событиями-крючками, а также добавлял и/или повторно использовал элементы SVG по-разному, но еще не достиг такого поведения, которое аналогично поведению, которое наблюдается при использовании собственного векторного файла GeoJSON Leaflet слой. Причина, по которой я не хочу использовать собственный слой, заключается в том, что я хочу использовать множество других функций d3, которые просто не являются частью реализации Leaflet.

Вопрос: Кто-нибудь добился анимированного масштабирования при объединении Листовки и d3 с использованием векторов, основанных на негравитации? Если так - как?

Ответ 1

Пример

Я думаю, этот является одним из лучших решений, которые я нашел для объединения листов и d3, ZJONSSON.

d3 + Интеграция лифтов

В этом примере карта Leaflet запускается как SVG здесь map._initPathRoot(), а SVG затем выбирается с помощью d3 var svg = d3.select("#map").select("svg"), g = svg.append("g");, после чего можно получить все удовольствия d3.

В этом примере событие карты Leaflet map.on("viewreset", update); используется для вызова update и перехода слоя d3 на карту viewreset. После этого параметры перехода d3 будут определять, как слой d3 реагирует на событие панорамирования/масштабирования карты Leaflet.

Таким образом, у вас есть полный объем библиотек d3 + Leaflet, без проблем с вычислением границ карт и т.д., так как это удобно обрабатывается Leaflet.

Анимированное перемещение вектора

Для анимации в последнем выпуске Leaflet есть опция Pan and Zoom animation. Хотя это не так настраивается как d3, вы всегда можете отредактировать код src Leaflet, чтобы изменить продолжительность перехода! Векторные векторные слои Leolet GeoJSON (L.geoJson) не нужно обновлять на событии карты листов (в update), так как они уже добавлены к карте в качестве SVG и обрабатываются листом.

Обратите внимание, что при реализации L.geoJson это также означает, что вам не нужно map._initPathRoot(), так как Leaflet добавит слой к карте в качестве SVG, так что вы можете просто d3.select его.

Также можно добавить переменную className в параметры слоя L.geoJson, чтобы вы могли стилизовать через CSS или d3.select функцию через уникальный идентификатор класса, назначенный во время листа onEachFeature.