D3.js kullanarak Pasifik'te ortalanmış bir Mercator Haritasını Yakınlaştırmak ve Kaydırmak

Bu, benim için açık olanın kör olmasıyla ilgili basit bir durum olsaydı özür dilerim, ancak dünyanın bir haritasını gösteren bir sayfa oluşturmaya çalışıyorum (veriler Pasifik merkezli Mercator projeksiyonunda bir TopoJSON dosyasından alınmıştır. Yani Sol tarafta Avrupa, sağda Amerika ve ortada Avustralya. Böyle Biraz ...D3.js kullanarak Pasifik'te ortalanmış bir Mercator Haritasını Yakınlaştırmak ve Kaydırmak

Ben, yakınlaştırma ve benim kalpleri arzu haritayı kaydırmak için mümkün istiyorum Bu noktadan itibaren The Pacific Centered World

ama doğu veya batıya kaydırmak, ben kaydırmak için haritayı istiyorum ' etrafında 've dünyanın sonuna gelmeyin (umarım bu mantıklıdır).

Şu anda üzerinde çalıştığım kod burada (veya aşağıdaki Gist'te (https://gist.github.com/d3noob/4966228) veya blokta (http://bl.ocks.org/d3noob/4966228));

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
body {font-size:11px;} 
path { 
    stroke: black; 
    stroke-width: 0.25px; 
} 
</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/topojson.v0.min.js"></script> 
<script> 
var width = 960, 
    velocity = .005, 
    then = Date.now() 
    height = 475; 

var projection = d3.geo.mercator() 
    .center([0, 0 ]) 
    .scale(1000); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var path = d3.geo.path() 
    .projection(projection); 

var g = svg.append("g"); 


d3.json("world-110m.json", function(error, topology) { 
    g.selectAll("path") 
    .data(topojson.object(topology, topology.objects.countries).geometries) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .style("fill","black") 

    d3.timer(function() { 
    var angle = velocity * (Date.now() - then); 
    projection.rotate([angle,0,0]); 
    svg.selectAll("path") 
     .attr("d", path.projection(projection)); 
    }); 

    var zoom = d3.behavior.zoom() 
    .on("zoom",function() { 
    g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")") 
    }); 

    svg.call(zoom) 

}); 
</script> 
</body> 
</html>

kod örneklerinden kaynaşmasıyla oluşmuş ve bunun sonucunda otomatik olarak batıdan doğuya döndürebilirsiniz bir harita görebilirsiniz ve ben den, kaydırmak ve fareyi kullanarak, ancak kaydırma yaparken ve yakınlaştırma yakınlaştırabilir ne söyleyebilirim, "svg" öğesi içindeki haritayı değil, "g" elemanını etkiliyorum. Meridyende merkezlenmiş bir haritayı kaydırıp yakınlaştırabilmenin iyi örnekleri iyi örnekler vardır. Ama hiç keşfettiğim anti-meridyen yok.

Herhangi bir yardım büyük memnuniyetle karşılanacaktır.

kaynak

2013-02-16 d3noob

bulacaksınız, aynı sorun üzerinde çalıştım. an example (see code) Burada, projeksiyonu (sarma ile) döndürmek için sola/sağa, ve yakınlaştırmak için yukarı/aşağı çevirme (maks. Mutlak enlemle kelepçelenerek), burada da yakınlaştırın. Projeksiyonun her zaman görüntüleme kutusu içine sığmasını sağlar.

Yakınlaştırma davranışı ve projeksiyon merkezi() ve döndürme() etkileşimi hakkında çok şey öğrendim.

kaynak

2013-09-19 11:45:54 patricksurry

Müthiş çözebilir! Bu harika görünüyor. İyi iş ve çok teşekkürler. Görüyorum ki orada bazı karmaşık kodlar var. Çalışmak için biraz zaman ayırmam gerekecek, ama bu benim elde etmeye çalıştığım şeye benziyor. Şerefe. – d3noob

Temel numara sadece fare çevirisini yukarı/aşağı harita çevirisi ve sol/sağ harita döndürme ile ayırmaktır. Aslında bir süredir oynadığım [Dünyanın 3B trackball rotasyonuna] benziyor (https://gist.github.com/patricksurry/5721459). – patricksurry

Bu gerçekten çok hoş. Mesaj için teşekkürler. –

-2

Elma ürünleriyle ilgili Google haritaları şu şekilde çalışıyor. Scrol sola, ve bir Avustralya, sonra başka bir ve başka bir

kaynak

2013-05-18 02:17:24 Anya

umut bu kod senin sorunun

var projection = d3.geo.equirectangular() 
    .center([0, 5]) 
    .scale(90) 
    .translate([width/2, height/2]) 
    .rotate([0, 0]) 
    .precision(9);

kaynak

2013-11-28 07:49:42 CyberDaemon

Üzgünüm, bu projeksiyonda aynı sorun var. Yukarıdaki patriksurry tarafından sağlanan cevap olsa da iyi bir iş çıkarıyor. Şerefe – d3noob

D3.js kullanarak Pasifik'te ortalanmış bir Mercator Haritasını Yakınlaştırmak ve Kaydırmak

cevap

İlgili konular