强制传单地图只使用整数缩放级别(不使用小数级别)
Force leaflet map to use only integer zoom levels (no fractional levels)
我无法强制我的传单地图只使用整数缩放级别。只要我只使用-/+控制按钮就没问题,但一旦我使用鼠标滚轮或地图之类的功能。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>
下面是我如何初始化我的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);
在将我们的底图添加到地图后,七重奏库将zoomSnap设置为0。这基本上为地图启用了分数缩放级别。
在深入研究了七巧板文档之后,我发现了这个小块信息:
modifyScrollWheel
默认情况下,Tangram修改了传单的滚轮行为,以便在缩放时更好地与自己的渲染循环同步。如果这干扰了您的应用程序,您可以使用可选的modifyScrollWheel选项禁用此行为:
var layer = Tangram.leafletLayer({
modifyScrollWheel: false,
...
});
我试过了,它确实解决了我的问题。
添加分数缩放作为增强你可以使用zoomStep= 1
相关文章:
- 使用javascript查找小数前的整数(不包括特殊字符)
- 使用 Javascript 将小数更改为整数
- Javascript - 用小数替换整数
- 整数到最接近的 .5 小数
- 显示小数两位数,除非是整数
- 在Javascript中,有没有一种方法可以区分整数和非常接近的小数
- Javascript验证只允许正整数和负整数..没有小数
- 用于整数和小数(货币)的javascript正则表达式
- 如何检查整数是否能被小数整除
- 强制传单地图只使用整数缩放级别(不使用小数级别)
- 在javascript中,将整数转换为小数部分的最有效方法是什么?
- Regexp用于检查输入是否仅为整数(int),以及检查另一个输入是否仅为带有2位小数的数字
- 如何将此百分比转换为带小数位数的整数
- 需要目前的整数与2个小数(5.00)在javascript
- 如何在图表API x/y轴标签中仅显示整数(没有小数)
- 两个整数,三个小数的正则表达式(XX.XXX)
- 正则表达式只允许整数和小数,不需要精度
- 为什么javascript接受小数作为整数
- 在Javascript中四舍五入到最接近的可被小数整除的整数
- 如何检查字符串是否为正整数,允许0和全0小数