LeafletJS＆amp; Cloudmade：Retina Tile支持

Question

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

我使用此网址访问云制作的api：

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

我的key，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);

您是否尝试过使用不同的样式并检查是否存在问题？