强制传单地图仅使用整数缩放级别(无小数级别)
Force leaflet map to use only integer zoom levels (no fractional levels)
我无法强制我的传单地图仅使用整数缩放级别。只要我只使用 -/+ 控制按钮就可以了,但是只要我使用鼠标滚轮或 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);
分数缩放已添加为 enhancement
您可以使用 zoomStep= 1
禁用它
在将我们的底图添加到地图后,七巧板库将 zoomSnap 设置为 0。这基本上为地图启用了分数缩放级别。
在深入研究七巧板文档后,我发现了以下信息:
modifyScrollWheel
默认情况下,Tangram 会修改 Leaflet 的滚轮行为,以便在缩放时更好地与自己的渲染循环同步。如果这会干扰您的应用程序,您可以使用可选的 modifyScrollWheel 选项禁用此行为:
var layer = Tangram.leafletLayer({
modifyScrollWheel: false,
...
});
我试过了,确实解决了我的问题。
我无法强制我的传单地图仅使用整数缩放级别。只要我只使用 -/+ 控制按钮就可以了,但是只要我使用鼠标滚轮或 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);
分数缩放已添加为 enhancement
您可以使用 zoomStep= 1
在将我们的底图添加到地图后,七巧板库将 zoomSnap 设置为 0。这基本上为地图启用了分数缩放级别。
在深入研究七巧板文档后,我发现了以下信息:
modifyScrollWheel
默认情况下,Tangram 会修改 Leaflet 的滚轮行为,以便在缩放时更好地与自己的渲染循环同步。如果这会干扰您的应用程序,您可以使用可选的 modifyScrollWheel 选项禁用此行为:
var layer = Tangram.leafletLayer({
modifyScrollWheel: false,
...
});
我试过了,确实解决了我的问题。