使用Stamen或CartoDB在d3 / js中使用视网膜贴图

时间:2016-05-11 16:19:02

标签: javascript d3.js maps retina-display

我想知道如何修改我的代码以检测视网膜显示并向用户提供增强的图块。我通常使用此代码来调用tile:

雄蕊瓷砖:

.attr("xlink:href", function(d) { return "http://tile.stamen.com/toner-lite/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

CartoDB图块:

.attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".basemaps.cartocdn.com/light_all/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

谢谢!

1 个答案:

答案 0 :(得分:1)

好的,使用以下方式让它工作:

function isRetina() {
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);}

function isRetinaDisplay() {
if (window.matchMedia) {
    var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
    if (mq && mq.matches || (window.devicePixelRatio > 1)) {
        return true;
    } else {
        return false;}
}
}

image.enter().append("image")
.attr("xlink:href", function(d) {
    if (isRetinaDisplay) {
        return "http://tile.stamen.com/toner-lite/" + d[2] + "/" + d[0] + "/" + d[1] + "@2x.png";
    } else {
        return "http://tile.stamen.com/toner-lite/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";
    }
})

这是针对Stamen瓷砖的。基本上只需在文件名末尾添加“@ 2x。