温馨提示:本文翻译自stackoverflow.com,查看原文请点击:c# - How can i show shortest path with ant-path-leaflet?
angularjs asp.net-core c# leaflet

c# - 如何使用ant-path-leaflet显示最短路径?

发布于 2020-05-19 11:50:26
 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/ map显示了最短路径,但在我的情况下, map显示了一条直线。我认为我的代码等于示例代码。

在此处输入图片说明

我究竟做错了什么?

查看更多

提问者
Simone Corbelli
被浏览
8
Rena 2020-03-03 15:05

首先,您需要知道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>               
}

结果: 在此处输入图片说明