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: '© <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显示了一条直线。我认为我的代码等于示例代码。
我究竟做错了什么?
首先,您需要知道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: '© <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>
}