Question

我使用以下英国地理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中的这些数字不是实际的纬度/经度值。他们必须改变。此函数将量化拓扑转换为绝对坐标：

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中进行测试，看看它是否有效。

另一种方法是将TopoJSON与GeoJSON重叠，后者使用绝对坐标系统。

以下是API参考：https://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects

topojson / D3 /经度+纬度地图

1 个答案: