javascript - LeafletJS 和 Cloudmade：Retina Tile 支持

Question

我在我的移动 HTML5 应用程序中使用 Leaflet JS 和 Cloudmade。不幸的是，我无法让视网膜支持工作。

我使用这个 url 来访问云制作的 api：

var url = 'http://{s}.tile.cloudmade.com/{key}/{style}@2x/256/{z}/{x}/{y}.png?token={token}';

Mykey和被正确的值替换style。token

对于我的传单地图图层，我使用以下简单配置：

L.tileLayer(url, {
        detectRetina: true
      }).addTo(map);

不幸的是，结果看起来真的很奇怪。

瓷砖及其位置似乎出了点问题。

如果我删除detectRetina标志，我会在浏览器中得到正确的结果

但正如您所见，这两种解决方案在我的视网膜显示器（Mac Book Pro）上都不清晰。

有没有人让这个工作？

谢谢！

Answer 1

这对我有用：

var tileURL = 'http://{s}.tile.cloudmade.com/{api-key}/1714' + (L.Browser.retina? '@2x': '') + '/256/{z}/{x}/{y}.png';          

L.tileLayer(tileURL, {detectRetina: true}).addTo(yourMap);

您是否尝试过不同的瓷砖样式并检查这是否可能是问题？