Powiększanie i przesuwanie mapy Mercatora wyśrodkowanej na Pacyfiku za pomocą d3.js

Przepraszam, jeśli to prosty przypadek, że jestem ślepy na oczywistość, ale próbuję stworzyć stronę z mapą świata (dane pochodząca z pliku TopoJSON) w projekcji Mercator wycentrowanej na Pacyfiku. To znaczy. Europa po lewej, Ameryka po prawej i Australia po środku. Trochę tak ...Powiększanie i przesuwanie mapy Mercatora wyśrodkowanej na Pacyfiku za pomocą d3.js

The Pacific Centered World

Od tej chwili chcę, aby móc powiększać i przesuwać mapę, aby moje pragnienie serca, ale kiedy pan wschód lub zachód, chcę, aby przewinąć mapę " wokół "i nie doszli do końca świata (mam nadzieję, że to ma sens).

Kod, nad którym obecnie pracuję, znajduje się tutaj (lub na poniższym Gist (https://gist.github.com/d3noob/4966228) lub bloku (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 jest połączeniem przykładów iw rezultacie mogę zobaczyć mapę, która może automatycznie obracać się z zachodu na wschód, a ja mogę przesuwać i powiększać za pomocą myszki, ale kiedy panoramowanie i powiększanie, z tego co ja mogę powiedzieć, że mam wpływ na wewnętrzny element "g", a nie na mapę wewnątrz elementu "svg".

Istnieje wiele dobrych przykładów na przesuwanie i powiększanie mapy na środku południka. Ale żaden z anty-południka, który odkryłem.

Każda pomoc zostanie bardzo doceniona.

Źródło

2013-02-16 d3noob

Skończyło się na pracy nad tym samym problemem. Oto an example (see code), w którym przesuwa się w lewo/w prawo, aby obrócić projekcję (z oblewaniem) oraz w górę/w dół, aby przetłumaczyć (zaciśnięty przez maksymalną szerokość bezwzględną), z powiększeniem. Zapewnia, że projekcja zawsze mieści się w oknie podglądu.

Nauczyłem się wiele na temat zachowań związanych z powiększaniem i centrowaniem projekcji() i obracaniem().

Źródło

2013-09-19 11:45:54 patricksurry

Awesome! To wygląda świetnie. Dobra robota i wielkie dzięki. Widzę, że masz tam (dla mnie) skomplikowany kod. Będę musiał poświęcić trochę czasu na jej przestudiowanie, ale to wygląda dokładnie tak, jak próbowałem to osiągnąć. Twoje zdrowie. – d3noob

Podstawowa sztuczka polega na oddzieleniu translacji myszy na obrót mapy w górę/w dół i obrót mapy w lewo/w prawo. Jest to trochę podobne do [rotacji trackballa 3D kuli ziemskiej] (https://gist.github.com/patricksurry/5721459) Grałem jakiś czas temu. – patricksurry

To jest naprawdę miłe. Dzięki za publikację. –

-2

Mapy Google na produktach jabłkowych działają w ten sposób. Przewiń w lewo, a opuścisz jedną Australię, a potem znajdziesz inną i inną

Źródło

2013-05-18 02:17:24 Anya

nadzieja kod ten może rozwiązać Twój problem

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

Źródło

2013-11-28 07:49:42 CyberDaemon

Niestety, ten sam problem występuje z tą projekcją. Odpowiedź dostarczona przez patriksurry powyżej robi jednak dobrą robotę. Twoje zdrowie – d3noob

Powiększanie i przesuwanie mapy Mercatora wyśrodkowanej na Pacyfiku za pomocą d3.js

Odpowiedz

Powiązane problemy