Global map tiles disappear past zoom level 19(全球地图图块在缩放级别 19 后消失)
问题描述
我将 OpenStreetMap 与
<小时>
编辑:
//加载地图this.map_ = L.map($(selector)[0], {中央: [48.8459382,2.2863024,],最大缩放:24,缩放:20,});
我猜你用过map.options.maxZoom
设置为高数字,让用户缩放以查看您的室内图像细节.
但是,OSM 磁贴在缩放级别 19 之后不可用,因此服务器返回 404 错误,并且您的磁贴被错误磁贴替换(或者如果未指定,则只是灰色磁贴).
在这种情况下,您只需在 Tile Layer 上使用这 2 个选项(一起)来告诉 Leaflet 重新使用较低缩放比例的图块并展开它们:
maxNativeZoom
设置为 19.maxZoom
设置为您需要的任何值,并且相等到map.options.maxZoom
如果指定.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{maxNativeZoom: 19,//OSM 最大可用缩放为 19.maxZoom: 22//匹配地图 maxZoom,或者不定义 map.options.maxZoom.}).addTo(地图);
演示:http://jsfiddle.net/ve2huzxw/68/
I use OpenStreetMap with Leaflet.js.
I have a map with an indoor picture on it. The problem is when I zoom in, streets disapears. Do you know anything that can solve this plz? Tricks or tips!
EDIT:
// Load the Map
this.map_ = L.map($(selector)[0], {
center: [
48.8459382,
2.2863024,
],
maxZoom: 24,
zoom: 20,
});
I guess you have used map.options.maxZoom
at a high number to let the user zoom to see your indoor image details.
However, OSM tiles are not available past zoom level 19, so the server returns 404 errors and your tiles are replaced by the Error Tile (or just a grey tile if not specified).
In that case, you would simply need to use these 2 options (together) on Tile Layer to tell Leaflet to re-use tiles from a lower zoom and to expand them:
maxNativeZoom
set at 19.maxZoom
set at whatever you need, and equal tomap.options.maxZoom
if specified.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxNativeZoom: 19, // OSM max available zoom is at 19.
maxZoom: 22 // Match the map maxZoom, or leave map.options.maxZoom undefined.
}).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/68/
这篇关于全球地图图块在缩放级别 19 后消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:全球地图图块在缩放级别 19 后消失
基础教程推荐
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 直接将值设置为滑块 2022-01-01