Как показать два разных пути на карте одновременно? - PullRequest
Новая
       22

Как показать два разных пути на карте одновременно?

0 голосов
/ 04 апреля 2019

Я попытался показать два пути на листовой карте одновременно с помощью фреймворка 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>

Я ожидал параллельную визуализацию на карте, но на самом деле она показывала одну анимацию пути, и если я увеличу карту, она изменит путь на вторую.

...