Question

我必须使用给定的坐标将点绘制到世界地图上。由于某些原因，这些点的位置被证明是错误的（例如，第一个点应该在加拿大，但在非洲显示）。

我使用的Topojson：https://github.com/d3-node/d3node-map-world/blob/master/data/world.json

代码：

    const projection = d3.geoNaturalEarth1()
        .center([0, 49.5])
        .scale(180);

    const path = d3.geoPath()
        .projection(projection);
    const svg = d3n.createSVG(width, height);


    svg.append('g')
        .selectAll('path')
        .attr('class', 'countries')
        .data(data.features)
        .enter().append('path')
        .attr('d', path)
        .style('stroke', 'white')
        .style('stroke-width', 1.5)
        .style('opacity', 0.8);


    svg.append('path')
        .datum(topojson.mesh(data.features, (a : any, b : any) => { return a.id !== b.id; }))
        .attr('class', 'countries')
        .attr('d', path);


    let points = [{long: 50.085767, lat: -101.681522}, { long: 24.568085, lat: 22.260878}];

    svg.append('g')
        .selectAll('circle')
        .data(points)
        .enter().append('circle')
        .attr('r', 7.5)
        .attr('fill', 'red')
        .attr("transform", (d) => `translate(${projection([d.long, d.lat])})`);

提琴：

https://jsfiddle.net/vypu9qwr/16/

Answer 1

长时间互换，不存在-101的纬度

let marks = [{long: -101.681522, lat: 50.085767}, { long: 24.568085, lat: 22.260878}];

在D3 geoNaturalEarth1地图上绘制点

1 个答案: