强制传单地图仅使用整数缩放级别（无分数级别）

Question

I'm unable to force my leaflet map to use only integer zoom levels. As long as I use only the -/+ control buttons it's fine, but as soon as I use the mouse wheel or a function like map.fitBounds(some polygon) I always end up with a fractional zoom level.

This is bad for me because I use tiles for levels 0 to 17 and when I end up with a fractional zoom level in between two levels, like 10.5, the tiles are scaled and blurry.

The documentation says the default for zoomSnap and zoomDelta is 1. So I don't get why I end up with a fractional zoom level anyway. How can I prevent this?

I'm using these

<!-- 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>

and here's how I init my map:

    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

The tangram library was setting the zoomSnap to 0 after adding our basemap to the map. Which basically enables fractional zoom levels for the map.

After digging through the tangram documentation, I found this little nugget of information:

modifyScrollWheel

By default, Tangram modifies Leaflet's scrollwheel behavior, for better synchronization with its own render loop while zooming. If this interferes with your application, you can disable this behavior with the optional modifyScrollWheel option:

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

I tried it, and indeed it fixed my issue.

Answer 2

添加了部分缩放作为增强功能 ，可以使用zoomStep= 1禁用它