topojson /経度+緯度

Question

イムとD3 /マップiは、地図上の経度+緯度点プロットを取ることができるようにしたいです。

私は次のようにマップにジオメトリコレクションの場所を追加してい：

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

座標が正しい場所にはありませんが。

以下は完全なjavascriptです。 TopoJSONで

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

、coordinatesにおけるそれらの数字は、実際の緯度/経度の値ではありません。彼らは変身する必要があります。あなたがリンクされTopoJSONの終わりにscaleとtranslateを見つけることができます

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

：この関数は、絶対座標に量子化されたトポロジーを変換

その機能に基づいて

"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で動作確認してください。

代わりに、絶対座標系を使用するGeoJSONにTopoJSONをオーバーレイする方法もあります。ここで

は、APIリファレンスは次のとおりです。迅速な応答をhttps://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects