Mapbox Tile Layer 中的街道标签太小

Posted 2023-02-16

【中文标题】Mapbox Tile Layer 中的街道标签太小

【英文标题】：Street labels in Mapbox Tile Layer too small

【发布时间】：2016-08-30 15:28:47

【问题描述】：

我有以下传单地图：JSFiddle link

<div id="mapid" style="height: 300px;"></div>

<script>
  var mapboxTiles = L.tileLayer(mapBoxUrl, 
    attribution: attributionText
  );

  var map = L.map('mapid')
    .addLayer(mapboxTiles)
    .setView([42.888284, -78.877222], 16);

</script>

街道标签的字体非常小，以至于无法阅读，当您放大时，字体会变小。有没有办法控制字体大小？

【参考方案1】：

看起来您有 512 像素大小的图块，但映射地球时好像它们是 256 像素大小。

因此，您需要在拼贴层上组合使用 tileSize 和 zoomOffset 选项来补偿这些设置，并在拼贴上使用可读大小的文本检索正确的视图：

var mapboxTiles = L.tileLayer(mapBoxUrl, 
  attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  tileSize: 512,
  zoomOffset: -1
);

更新的 JSFiddle：https://jsfiddle.net/zq02pnpg/2/

【讨论】：

出于好奇，您是如何知道我使用了多大尺寸的图块以及如何映射它们的？

右键单击您的地图图块并选择“查看图像”以获取单个图块，您可以在该图块上获取图像属性。至于贴图，仅更改 tile 大小会使视图落在给定坐标的完全不同的位置，这意味着也应调整缩放。

有人知道这是什么原因吗？我刚刚使用所有最新的示例代码设置了一个地图并且遇到了同样的问题。 tileSize 文档的链接也应该是leafletjs.com/reference-1.6.0.html#gridlayer-tilesize

非常好，这就是我需要将解决方案应用于 dash-leaflets dl.Map(id=MAP_ID, style='width': '1000px', 'height': '500px', center= [29,-97] , zoom=8, children=[ dl.TileLayer(url=mapbox, tileSize = 512, zoomOffset = -1)])

【参考方案2】：

我也有这个问题。就我而言，该地图在桌面上渲染得还不错，但在移动设备上，它（字体大小）变得非常小并且不可读。 我尝试将图块大小和缩放偏移量加倍，它奏效了。

var mapboxTiles = L.tileLayer(mapBoxUrl, 
  attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  tileSize: 1024,
  zoomOffset: -2
);

我不确定这是否违反了任何形式，但它对我有用！