2013-02-16 19 views
11

Mi scuso se questo è un semplice caso in cui io sono cieco all'ovvio, ma sto cercando di mettere insieme una pagina che mostra una mappa del mondo (dati proveniente da un file TopoJSON) nella proiezione di Mercator centrata sul Pacifico. Cioè Europa a sinistra, America a destra e Australia a metà. Un po 'come questo ...Zoom e panoramica su una mappa Mercator centrata sul Pacifico con d3.js

The Pacific Centered World

Da questo punto voglio essere in grado di zoom e pan la mappa per il mio cuore desidera, ma quando ho Pan est-ovest o, voglio la mappa per scroll' intorno 'e non venire alla fine del mondo (spero che abbia senso).

Il codice al momento sto lavorando è qui (o al seguente Gist (https://gist.github.com/d3noob/4966228) o blocco (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> 

Il codice è un amalgama di esempi e di conseguenza posso vedere una mappa che può ruotare ovest a est automaticamente, e posso pan e zoom con il mouse, ma quando panning e zoom, da quello che ho posso dire, sto influenzando l'elemento interno "g" e non la mappa all'interno dell'elemento "svg".

Esistono molti buoni esempi di possibilità di eseguire il pan e lo zoom di una mappa centrata sul meridiano. Ma nessuno sull'anti-meridiano che ho scoperto.

Qualsiasi aiuto sarebbe molto apprezzato.

risposta

10

Ho finito per lavorare sullo stesso problema. Ecco lo an example (see code) in cui si effettua una panoramica verso sinistra/destra per ruotare la proiezione (con avvolgimento) e verso l'alto/il basso per tradurre (bloccata dalla massima latitudine assoluta), anche con lo zoom. Garantisce che la proiezione si adatti sempre alla viewbox.

Ho imparato molto sul comportamento dello zoom e sull'interazione del centro di proiezione() e di rotazione().

+0

Impressionante! Sembra fantastico. Buon lavoro e molte grazie. Posso vedere che hai un codice complesso (per me) lì dentro. Dovrò prendermi del tempo per studiarlo, ma sembra proprio quello che stavo cercando di ottenere. Saluti. – d3noob

+0

Il trucco di base è solo per separare la traslazione del mouse in traslazione su/giù della mappa e rotazione della mappa sinistra/destra. In realtà è un po 'simile alla [rotazione 3D del globo terrestre] (https://gist.github.com/patricksurry/5721459) che ho suonato poco fa. – patricksurry

+0

Questo è veramente bello. Grazie per la pubblicazione. –

-2

Le mappe Google sui prodotti Apple funzionano così. Scrol a sinistra, e ne lascerai una in Australia, poi ne troverai un'altra e un'altra e un'altra

0

speranza questo codice può risolvere il tuo problema

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

Siamo spiacenti, lo stesso problema esiste con questa proiezione. La risposta fornita da Patriksurry sopra fa comunque un buon lavoro. Saluti – d3noob

Problemi correlati