強制傳單地圖僅使用整數縮放級別（無分數級別）

Question

我無法強制我的傳單地圖僅使用整數縮放級別。 只要我只使用-/ +控制按鈕，就可以了，但是只要我使用鼠標滾輪或諸如map.fitBounds（some polygon）之類的函數，我總會得到分數縮放級別。

這對我來說是不利的，因為我將圖塊的級別設置為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);

Answer 1

在將底圖添加到地圖后，七巧板庫將zoomSnap設置為0。 基本上可以為地圖啟用分數縮放級別。

在瀏覽了七巧板文檔之后，我發現了這一小塊信息：

modifyScrollWheel

默認情況下，七巧板修改Leaflet的滾輪行為，以便在縮放時與其自身的渲染循環更好地同步。 如果這干擾了您的應用程序，則可以使用可選的ModifyScrollWheel選項禁用此行為：

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

我嘗試過，確實解決了我的問題。

Answer 2

添加了部分縮放作為增強功能 ，可以使用zoomStep= 1禁用它