Построение точек на карте D3 geoNaturalEarth1 - PullRequest
Новая
       29

Построение точек на карте D3 geoNaturalEarth1

0 голосов
/ 11 октября 2018

Я должен нанести точки на карту мира, используя заданные координаты.По какой-то причине расположение точек оказывается неправильным (например, первая точка должна быть в Канаде, но отображается в Африке).

Топойсон, который я использую: 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/

1 Ответ

0 голосов
/ 11 октября 2018

Перестановка лат и лонг, лат -101 не существует 

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