Как я могу показать кратчайший путь с листовкой муравей?

Question

 var latlngs = [
                [44.0567000, 12.5552968],
                [44.0567000, 12.5460868]
            ]; 
 const path = L.polyline.antPath(latlngs, {
                "delay": 400,
                "dashArray": [
                    10,
                    20
                ],
                "weight": 5,
                "color": "#0000FF",
                "pulseColor": "#FFFFFF",
                "paused": false,
                "reverse": false,
                "hardwareAccelerated": true
            });
            const mymap2 = L.map('mapid').setView([0, 0], 13);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(mymap2);

            mymap2.addLayer(path);
            mymap2.fitBounds(path.getBounds())

В этом примере: https://rubenspgcavalcante.github.io/leaflet-ant-path/ карта показывает кратчайший путь, но в моем случае карта показывает прямую линию. Я думаю, мой код соответствует коду примера.

Что я делаю не так?

Answer 1

Во-первых, вам нужно знать, что ant-path plugin не используется для поиска кратчайшего пути для вас, он просто отображает путь по широте и долготе, который установлен вами.

Если вы хотите отобразить Для маршрута вам нужно задать больше широты и долготы.

Вот рабочая демонстрация, как показано ниже:

<div id="map"></div>

@section Scripts
{
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
            crossorigin=""></script>
    <script src="~/lib/leaflet-ant-path-bower-master/leaflet-ant-path-bower-master/dist/leaflet-ant-path.js"></script>

    <style>
        body {
            margin: 0px;
        }
        #heading {
            text-align: center;
            padding: 20px;
            background: #333;
            color: #CCC;
        }
        a {
            color: #3388ff;
        }
        #map {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #333;
        }
        .leaflet-canvas-layer {
            opacity: 0.55;
        }
    </style>
    <script>
        var map = L.map('map', {
            center:[44.057039, 12.551160],
            zoom: 11,
            maxzoom: 18,
            minzoom: 1,
            zoomControl: false,  
            editable: true, 
        });   
       L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

        //add more latitude and longitude
        let arrs = [
        [44.0567000, 12.5552968],
        [44.056880, 12.555297],
        [44.056955,12.553081],
        [44.057004, 12.551313],
        [44.057039, 12.551160],
        [44.056712, 12.547406],
        [44.056737, 12.547216],
        [44.0567000, 12.5460868]
                ];
    var antPath = L.polyline.antPath;
    var path = antPath(arrs, {
        "paused": false,   　　
        "reverse": false,　　
        "delay": 3000,　　　　
        "dashArray": [10, 20],　
        "weight": 5,　　　　
        "opacity": 0.5,　　
        "color": "#0000FF",　
        "pulseColor": "#FFFFFF"　　
    });
    path.addTo(map);
    </script>               
}

Результат: