[英]Using retina map tiles in d3/js with Stamen or CartoDB
我想知道如何修改代碼以檢測視網膜顯示並向用戶提供增強后的圖塊。 我通常使用以下代碼來調用圖塊:
雄蕊瓷磚:
.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"; })
謝謝!
OK,通過使用以下命令使其正常工作:
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";
}
})
這是用於雄蕊瓷磚。 基本上只需在文件名的末尾添加“ @ 2x”。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.