Question

我试图使用d3.js框架在传单地图上同时显示两个路径。但它无法显示平行的路径。而不是同时进行可视化，它显示的是一条路径，当我缩放地图时，它显示的是我想看到的平行线的另一条路径。

我已经尝试使用d3.js进行可视化，并为绘制路径实现了draw方法。然后我在两个地方调用该函数以显示两条平行的路径。

<body>

    <div id="demo"></div>
    <div id="map"></div>
    <script type="text/javascript">
    var mapboxTiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
        attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
    });


    var map = L.map('map')
        .addLayer(mapboxTiles)
        .setView([40.72332345541449, -73.99], 13);

    var svg = d3.select(map.getPanes().overlayPane).append("svg");
    var g = svg.append("g").attr("class", "leaflet-zoom-hide")

function draw(collection) {
var featuresdata = collection.features.filter(function(d) {
    return d.properties.id == "route1"
})
var transform = d3.geo.transform({
    point: projectPoint
});
var d3path = d3.geo.path().projection(transform);
var toLine = d3.svg.line()
    .interpolate("linear")
    .x(function(d) {
        return applyLatLngToLayer(d).x
    })
    .y(function(d) {
        return applyLatLngToLayer(d).y
    });

var ptFeatures = g.selectAll("circle")
    .data(featuresdata)
    .enter()
    .append("circle")
    .attr("r", 3)
    .attr("class", "waypoints");

var linePath = g.selectAll(".lineConnect")
    .data([featuresdata])
    .enter()
    .append("path")
    .attr("class", "lineConnect");

var marker = g.append("circle")
    .attr("r", 10)
    .attr("id", "marker")
    .attr("class", "travelMarker");

var originANDdestination = []
console.log(featuresdata.length)
for (let index = 0; index < featuresdata.length; index++) {
     originANDdestination[index] = featuresdata[index];

}


var begend = g.selectAll(".drinks")
    .data(originANDdestination[0])
    .enter()
    .append("circle", ".drinks")
    .attr("r", 5)
    .style("fill", "red")
    .style("opacity", "1");

var text = g.selectAll("text")
    .data(originANDdestination)
    .enter()
    .append("text")
    .text(function(d) {
        return d.properties.name
    })
    .attr("class", "locnames")
    .attr("y", function(d) {
        return -10
    })

map.on("viewreset", reset); 

// this puts stuff on the map! 
reset();
transition();

// Reposition the SVG to cover the features.
function reset() {
    var bounds = d3path.bounds(collection),
        topLeft = bounds[0],
        bottomRight = bounds[1];
    text.attr("transform",
        function(d) {
            return "translate(" +
                applyLatLngToLayer(d).x + "," +
                applyLatLngToLayer(d).y + ")";
        });
    begend.attr("transform",
        function(d) {
            return "translate(" +
                applyLatLngToLayer(d).x + "," +
                applyLatLngToLayer(d).y + ")";
        });

    ptFeatures.attr("transform",
        function(d) {
            return "translate(" +
                applyLatLngToLayer(d).x + "," +
                applyLatLngToLayer(d).y + ")";
        });

    // again, not best practice, but I'm harding coding
    // the starting point

    marker.attr("transform",
        function() {
            var y = featuresdata[0].geometry.coordinates[1]
            var x = featuresdata[0].geometry.coordinates[0]
            return "translate(" +
                map.latLngToLayerPoint(new L.LatLng(y, x)).x + "," +
                map.latLngToLayerPoint(new L.LatLng(y, x)).y + ")";
        });


    // Setting the size and location of the overall SVG container
    svg.attr("width", bottomRight[0] - topLeft[0] + 120)
        .attr("height", bottomRight[1] - topLeft[1] + 120)
        .style("left", topLeft[0] - 50 + "px")
        .style("top", topLeft[1] - 50 + "px");

    linePath.attr("d", toLine)
    g.attr("transform", "translate(" + (-topLeft[0] + 50) + "," + (-topLeft[1] + 50) + ")");

} // end reset


function transition() {
    linePath.transition()
        .duration(7500)
        .attrTween("stroke-dasharray", tweenDash)
        .each('end',transition)

        ; 
} //end transition

function tweenDash() {
    return function(t) {

        var l = linePath.node().getTotalLength(); 
        interpolate = d3.interpolateString("0," + l, l + "," + l);
        //t is fraction of time 0-1 since transition began
        var marker = d3.select("#marker");
        var p = linePath.node().getPointAtLength(t * l);

        marker.attr("transform", "translate(" + p.x + "," + p.y + ")"); 
        return interpolate(t);
    }
} //end tweenDash


function projectPoint(x, y) {
    var point = map.latLngToLayerPoint(new L.LatLng(y, x));
    this.stream.point(point.x, point.y);
} //end projectPoint
}
                                                                            //*******************************8888
d3.json("js/points2.geojson",draw);
d3.json('js/points.geojson',draw)

    function applyLatLngToLayer(d) {
        var y = d.geometry.coordinates[1]
        var x = d.geometry.coordinates[0]
        return map.latLngToLayerPoint(new L.LatLng(y, x))


    }
    </script>
</body>

我期望在地图上进行并行可视化，但是实际上，它显示的是一条路径的动画，如果我缩放地图，它将把路径更改为第二条路径。

如何在地图上同时显示两条不同的路径？

0 个答案: