javascript - LeafletJS & Cloudmade : Retina Tile Support

Question

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

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

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

我的 key、style 和 token 被替换为正确的值。

对于我的传单 map 层，我使用以下简单配置:

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

您是否尝试过不同的磁贴样式并检查这是否可能是问题所在？