topojson / D3 / 经度+纬度地图

Question

我正在使用以下 UK Geo JSON 渲染英国 SVG 地图 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 中的那些数字不是实际的 latitude/longitude 值。他们必须被改造。此函数将量化拓扑转换为绝对坐标：

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

您会在链接的 TopoJSON 的末尾找到 scale 和 translate：

"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

topojson / D3 / 经度+纬度地图

topojson / D3 / Map with longitude + latitude

javascript

svg

json

d3.js

topojson