Question

我有以下宣传单地图：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>

街道标签的字体大小非常小，无法读取，放大时，字体大小会变小。有没有办法控制字体大小？

Answer 1

看起来你有512px大小的瓷砖，但是将地球映射为256px大小。

因此，您需要在拼贴图层上添加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/

Answer 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
});

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

Mapbox Tile Layer中的街道标签太小

2 个答案: