topojson/D3/Karte mit Länge + Breite

Question

Im der folgenden Städten UK Geo JSON mit einer UK SVG Karte http://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json

Auf dieser Karte ich in der Lage sein will, machen Länge + Breite Punkte zu nehmen und zeichnen Sie auf die Karte .

Ich füge einen GeometryCollection Ort der Karte in der folgenden Art und Weise:

data.objects.places = { 
     type: "GeometryCollection", 
     geometries: [ 
      { 
       type: "Point", 
       coordinates: [-0.127758, 51.507351], // London 
       properties: { 
        name: "London - Testing" 
       } 
      } 
     ] 
    }; 

jedoch die Koordinaten nicht an der richtigen Stelle sind.

Unten ist das vollständige Javascript.

var width = 960; 
var height = 1000; 

var projection = d3.geo.albers() 
     .center([0, 55.4]) 
     .rotate([4.4, 0]) 
     .parallels([50, 60]) 
     .scale(4000) 
     .translate([width/2, height/2]); 

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

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

d3.json("topo_eer.json", function(error, data) { 

    // Create path for the UK 
    svg.selectAll(".subunit") 
      .data(topojson.feature(data, data.objects.eer).features) 
      .enter().append("path") 
      .attr("class", function(d) { return "subunit " + d.id; }) 
      .attr("d", path); 

    // Path around regions 
    svg.append("path") 
      .datum(topojson.mesh(data, data.objects.eer, function(a, b) { return a !== b; })) 
      .attr("d", path) 
      .attr("class", "subunit-boundary"); 

    // Add places to our data 
    data.objects.places = { 
     type: "GeometryCollection", 
     geometries: [ 
      { 
       type: "Point", 
       coordinates: [-0.127758, 51.507351], // London 
       properties: { 
        name: "London - Testing" 
       } 
      } 
     ] 
    }; 

    // try plotting a point 
    svg.append("path") 
      .datum(topojson.feature(data, data.objects.places)) 
      .attr("d", path) 
      .attr("class", "place-online"); 

    console.log(data); 

}); 

Answer 1

In einem TopoJSON sind diese Zahlen in den coordinates nicht die tatsächlichen Breite/Länge-Werte. Sie müssen transformiert werden. Diese Funktion wandelt die quantisiert Topologie zu absoluten Koordinaten:

function transformPoint(topology, position) { 
    position = position.slice(); 
    position[0] = position[0] * topology.transform.scale[0] 
    + topology.transform.translate[0], 
    position[1] = position[1] * topology.transform.scale[1] 
    + topology.transform.translate[1] 
    return position; 
}; 

Sie finden scale und translate am Ende des TopoJSON Sie verknüpft finden: auf diese Funktion

"transform": 
    {"scale": 
     [0.000818229038834542,0.0005946917122888551], 
    "translate":[-6.418556211736409,49.8647494628352] 
    } 

Basierend

, ich glaube, es ist einfach,

function transformPointReversed(topology, position) { 
    position = position.slice(); 
    position[0] = (position[0] - topology.transform.translate[0]) 
    /(topology.transform.scale[0]), 
    position[1] = (position[1] - topology.transform.translate[1]) 
    /(topology.transform.scale[1]) 
    return position; 
}; 

ich diese Funktion habe ich versucht, einfach gemacht und Ihr London Koordinaten zurück mir dieses Array: eine Funktion, macht genau das Gegenteil zu schreiben

[7688.309645789168, 2762.1059840278253] 

Bitte testen Sie es in Ihrem coordinates, um zu sehen, ob es funktioniert.

Eine Alternative ist die Überlagerung Ihres TopoJSON mit einem GeoJSON, der ein absolutes Koordinatensystem verwendet.

Hier ist die API-Referenz: https://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects