Проблема проецирования данных (d3) на карту Leaflet - PullRequest
Новая
       21

Проблема проецирования данных (d3) на карту Leaflet

0 голосов
/ 01 марта 2019

Я работаю над проектом, в котором я пытаюсь визуализировать данные из базы данных на карту листовки.Данные содержат длинные / широковые лат, но когда я пытаюсь нарисовать их на карте, все местоположение неверно или вообще не отображается.

Я читал, что координаты широты / долготы нете же самые координаты, которые используются на листовой карте, поэтому я пытаюсь перевести их, но безуспешно.

База данных имеет следующую структуру (файл .csv): 

datetime,city,state,country,shape,durationSeconds,durationHours,comments,date_posted,latitude,longitude
10/10/1949 20:30,san marcos,tx,us,cylinder,2700,45 minutes,"This event took place in early fall around 1949-50. It occurred after a Boy Scout meeting in the Baptist Church. The Baptist Church sit",4/27/2004,29.8830556,-97.9411111
10/10/1949 21:00,lackland afb,tx,,light,7200,1-2 hrs,"1949 Lackland AFB&#44 TX.  Lights racing across the sky & making 90 degree turns on a dime.",12/16/2005,29.38421,-98.581082

и пока код выглядит так: 

 var map = L.map('mapid').setView([10, 15], 2.2);   L.tileLayer('https://api.mapbox.com/styles/v1/josecoto/civ8gwgk3000a2ipdgnsscnai/'
        +'tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9zZWNvdG8iLCJhIjoiY2l2OGZxZWNuMDAxODJ6cGdhcGFuN2IyaCJ9.7szLs0lc_2EjX6g21HI_Kg', {
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'your.mapbox.access.token'
    }).addTo(map);

    var w = $("#mapid").width();
    var h = $("#mapid").height();     

    var projection = d3.geoMercator()
        .scale(w / 2 / Math.PI)
        .translate([w / 2, h / 2])

    function latLong(x,y)
    {      
        //console.log(x + ' and ' + y);
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        return point;
    }  

    var svg_map = d3.select(map.getPanes().overlayPane)
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    svg_map.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            var coords = projection([d.longitude, d.latitude]);
            return coords[0];
            //var coords = latLong(d.longitude, d.latitude);
            //return coords.x;    
            })
        .attr("cy", function(d) {
            var coords = projection([d.longitude, d.latitude]);
            return coords[1];
            //var coords = latLong(d.longitude, d.latitude);
            //return coords.y;        
            })
        .attr("r", function(d) {
            return 2;
         })

Когда я использую функцию geoMercator (), я вижу точки, отображаемые на карте, однако они проецируются на карту неправильно (потому что они изгибаются от функции или что-то).И когда я пытаюсь использовать функцию latLong (), они вообще не отображаются (но нет ошибок в отладчике).

Могу добавить, что я правильно получаю значения из базы данных, нопроблема в визуализации.Ребята, вы можете что-нибудь заметить?

Заранее спасибо!

РЕДАКТИРОВАТЬ: Вот изображение того, как это выглядит, когда я использую geoMercator:

Map

...