Принудительно использовать карту листовок, чтобы использовать только целочисленные уровни масштабирования (без дробных уровней)

Я не могу заставить свою карту листовки использовать только целочисленные уровни масштабирования. Пока я использую только кнопки управления -/+, это нормально, но как только я использую колесо мыши или функцию, например map.fitBounds(некоторый многоугольник), я всегда получаю дробный уровень масштабирования.

Это плохо для меня, потому что я использую плитки для уровней от 0 до 17, и когда я получаю дробный уровень масштабирования между двумя уровнями, например, 10,5, плитки масштабируются и размываются.

В документации сказано, что для zoomSnap и zoomDelta по умолчанию установлено значение 1. Так что я не понимаю, почему я все равно получаю дробный уровень масштабирования. Как я могу предотвратить это?

Я использую эти

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

<!-- L.esri for Leaflet -->
<script src="https://unpkg.com/esri-leaflet@2.0.4"></script>

<!-- Elevation plugin for Leaflet -->
<link rel="stylesheet" href="/app/libs/leaflet-elevation/dist/leaflet.elevation-0.0.4.css" />
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="app/libs/leaflet-elevation/dist/leaflet.elevation-0.0.4.min.js"></script>-->
<script src="/app/libs/leaflet-elevation/dist/leaflet.elevation-0.0.4.src.js"></script>

<!-- Marker Cluster plugin for Leaflet -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css">
<script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>

<!-- zoomhome plugin for Leaflet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/app/libs/leaflet-zoomhome/leaflet.zoomhome.css"/>
<script src="/app/libs/leaflet-zoomhome/leaflet.zoomhome.js"></script>

и вот как я начинаю свою карту:

    this.map = L.map(this.config.domNode, {
        center: [50.13466432216696, -72.72949218750001],
        zoom: 6,
        zoomSnap: 1,
        zoomDelta: 1,
        zoomControl: false,
        minZoom: 3,
        maxZoom: 17,
        scrollWheelZoom: this.config.scrollWheelZoom,
        wheelDebounceTime: 20,
        wheelPxPerZoomLevel: 50
    });

    L.Control.zoomHome({ position: 'topright' }).addTo(this.map);
Источник

2 ответа

Решение

Библиотека tangram устанавливала zoomSnap в 0 после добавления нашей базовой карты на карту. Который в основном включает дробные уровни масштабирования для карты.

Покопавшись в документации по tangram, я нашел этот маленький кусочек информации:

modifyScrollWheel

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

var layer = Tangram.leafletLayer({
    modifyScrollWheel: false,
    ...
});

Я попробовал, и это действительно решило мою проблему.

Источник

Дробное масштабирование было добавлено в качестве улучшения, вы можете отключить его, используя zoomStep= 1

Источник
Другие вопросы по тегам