topojson/D3/Карта с долготой + широты

Question

Im используя follwing Великобритании Geo JSON для визуализации Великобритании SVG Map http://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json

На этой карте я хочу, чтобы иметь возможность принять долготы + широты точек и сюжет на карте ,

Я добавляю GEOMETRYCOLLECTION место на карте следующим образом:

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

Однако координаты не в правильном месте.

Ниже приведен полный 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

В TopoJSON эти цифры в coordinates не фактические значения широты/долготы. Они должны быть преобразованы. Эта функция преобразует квантованную топологию в абсолютные координаты:

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; 
}; 

Вы найдете scale и translate в конце TopoJSON вы связаны:

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

На основе этой функции, я считаю, что это легко чтобы написать функцию, которая делает обратное:

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; 
}; 

Я попробовал эту функцию, я только что сделал, и ваши координаты Лондон вернул меня этот массив:

[7688.309645789168, 2762.1059840278253] 

Пожалуйста, проверьте его в coordinates, чтобы увидеть, если он работает.

Альтернативой является наложение вашего TopoJSON на GeoJSON, в котором используется абсолютная система координат.

Вот ссылка API: https://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects