Leaflet.js将标记绑定到计时器/日期

时间:2018-11-22 03:08:21

标签: javascript maps

我正在尝试创建地图,以便可以基于电子表格中的日期更新移动标记。我有下面的代码

function update() {
    // if not today, then stick data in corner and hide

    d3.csv("static/data/wakool.csv", function(data) {
    //returns an array of arrays [[array1], [array2]...[arrayn]]
    var latlongs = data.map(function(d) { return [d.Lat,d.Lng].map(Number); });

})


    feature.attr("transform",
        function(d) {
            if (d.day == timerCount) {
                        d3.csv("static/data/wakool.csv", function(data) {
                                //returns an array of arrays [[array1], [array2]...[arrayn]]
                        var latlongs = data.map(function(d) { return [d.Lat,d.Lng].map(Number); });
                        console.log(latlongs);
                        var marker3 = L.Marker.movingMarker(latlongs.slice(1,5000),
                        30000, {autostart: true, loop: true}).addTo(map);
                        })
                d3.select("#monthLabel").text("Date: " + d.Date);

                return "translate("+
                    map.latLngToLayerPoint(d.LatLng).x +","+
                    map.latLngToLayerPoint(d.LatLng).y +")";
            } else {
                return "translate(0,0)";
            }
        }
        );

当我运行完整代码(请告诉我是否需要完整代码)时,如果d.day(来自电子表格)与timerCount相匹配,我可以看到创建了新的移动标记。我正在寻找一种方法,使标记最初会更新,以在计时器滴答时更新为新坐标并移至该路径,而不是每次d.day == timerCount都创建一个新标记。因此,marker3的代码应该可变以从wakool.csv数据文件中获取slice(x,y),并应根据日期是否与timerCount相匹配来进行自我更新。

请让我知道是否需要更多细节。

0 个答案:

没有答案