Mapbox.js 缩放级别 0 未显示世界 map
[英]Mapbox.js zoom level 0 is not showing world map
问题描述
所以根据 Mapbox 文档， https://docs.mapbox.com/help/glossary/zoom-level/在缩放级别 0 我们可以看到世界 map，我认为这与 Z1F65479ZCC77E69DE3 中解释的相似.js 是https://leafletjs.com/examples/zoom-levels/如下所示，缩放 0 用于 Carto 平铺。
但是，为什么在缩放级别 0 时，Mapbox 会显示一个空白屏幕呢？
如果您在https: //docs.mapbox.com/mapbox.js/example/v1.0.0/ 中使用 map，则最多可以缩放它一个完全空白的屏幕。
我也在我的 HTML 页面中实现了它，它也显示了相同的结果。
var mymap = L.map('map').setView([0,0], 0); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', id: 'mapbox/streets-v11', maxZoom: 18, tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoiY2x0YW4iLCJhIjoiY2todTF0eTZ2MTh5MzJ5cGJzMWlnM2RpcCJ9.jVxTCY664slDpTiOjhzhwA' }).addTo(mymap);
* { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; font-size: 1vw; } body { height: 100%; } #output2 { height: 90vh; width: 25%; border: 1px solid black; } #map { height: 40%; border: 1px solid black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href = "style:css"> <title>Document</title> <link rel="stylesheet" href="https.//unpkg.com/leaflet@1.7.1/dist/leaflet:css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https.//unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> </head> <body> <div id = "output2"> <div id = "map"></div> </div> <script src="test.js"></script> </body> </html>
1 个解决方案
解决方案1
1 2020-12-15 07:13:38
产生此问题的原因是您设置为 -1 的zoomOffset属性。 使用此偏移量，当您缩放到 0 级时，它实际上会缩放到不存在的 -1，因此不会渲染 map。
只需将其删除（0 是默认值）或将其设置为 0。
....
zoomOffset: 0,
....
mapbox.js 1.6.2-更改缩放级别的tileet
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.