Question

我无法强制我的传单地图仅使用整数缩放级别。只要我只使用 - / +控制按钮就可以了，但是只要我使用鼠标滚轮或像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);

Answer 1

在将我们的底图添加到地图后，七巧板库将zoomSnap设置为0。这基本上可以为地图启用分数缩放级别。

在深入研究七巧板文档之后，我发现了这个小小的信息：

<强> modifyScrollWheel

默认情况下，Tangram会修改Leaflet的滚轮行为，以便在缩放时更好地与自己的渲染循环同步。如果这会干扰您的应用程序，您可以使用可选的modifyScrollWheel选项禁用此行为：

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

我试过了，确实解决了我的问题。

Answer 2

分数缩放被添加为enhancement 您可以使用zoomStep= 1

将其停用

强制传单映射仅使用整数缩放级别（无小数级别）

2 个答案: