Tìm lộ trình hiệu quả nhất | Maps Javascript APIs

Để hiểu hơn về các thuộc tính, tham số của ekmapplf.service.VRP đọc thêm tại đây.

Ví dụ này sử dụng Vehicle Routing Problem (VRP) API dịch vụ cung cấp tính năng tìm lộ trình hiệu quả nhất cho một đội phương tiện di chuyển đến một tập hợp các điểm đến và quay trở lại điểm xuất phát trong khi đáp ứng một số ràng buộc, chẳng hạn như công suất và thời gian.

Để có thể hiển thị đường đi cũng như các thông tin chi tiết về thời gian, khoảng cách, các bước di chuyển của lộ trình tối ưu cho từng phương tiện sử dụng Javascript Traveling Salesman Problem (TSP) API.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tìm lộ trình hiệu quả nhất</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	              #map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<div style="display: flex; height: 100vh">
<div class="Panel" style=" position: absolute; z-index: 1; width: 250px;  padding: 15px; margin: 10px; background: #fff;">
<span style="width: 100%;" id="duration"></span>
<ol style="margin:0; padding-inline-start: 20px;" id="steps"></ol>
</div>
<div id="map"></div>
</div>
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105.77909, 21.03941],
zoom: 11
});
var baseMap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}').addTo(map);
 
var featureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
type: 'vehicle',
description: 'Điểm bắt đầu/ kết thúc'
},
geometry: {
type: 'Point',
coordinates: [105.81665, 21.00113]
}
},
{
type: 'Feature',
properties: {
type: 'job',
description: 'Công việc 1'
},
geometry: {
type: 'Point',
coordinates: [105.91135, 21.04782]
}
},
{
type: 'Feature',
properties: {
type: 'job',
description: 'Công việc 2'
},
geometry: {
type: 'Point',
coordinates: [105.75535, 21.00520]
}
},
{
type: 'Feature',
properties: {
type: 'job',
description: 'Công việc 3'
},
geometry: {
type: 'Point',
coordinates: [105.77678, 21.05333]
}
}
]
};
 
map.on('load', function () {
map.addSource('points', {
type: 'geojson',
data: featureCollection
});
map.addLayer({
id: 'points-layer',
type: 'circle',
source: 'points',
paint: {
'circle-color': ['case', ['all', ['==', ['get', 'type'], 'vehicle']], '#FF2340', '#39AA54'],
'circle-radius': 8,
}
});
 
featureCollection.features.forEach(feature => {
var coordinates = feature.geometry.coordinates;
var description = feature.properties.description;
var popup = new maplibregl.Popup({
offset: {'bottom': [0, -10]},
closeButton: false,
closeOnClick: false
});
popup.setLngLat(coordinates).setHTML(description).addTo(map);
})
getRoutes();
});
 
function getRoutes(){
var VRPService = new ekmapplf.service.VRP({
apiKey: '{YOUR_API_KEY}'
});
var jobs = [
{
id: 1,
description: 'Công việc 1',
location: [105.91135, 21.04782],
},
{
id: 2,
description: 'Công việc 2',
location: [105.75535, 21.00520],
},
{
id: 3,
description: 'Công việc 3',
location: [105.77678, 21.05333],
}
];
var vehicles = [
{
id: 0,
start: [105.81665, 21.00113],
end: [105.81665, 21.00113],
profile: 'driving-car'
}
];
VRPService.setJobs(jobs);
VRPService.setVehicles(vehicles);
 
VRPService.run(function (error, response) {
console.log(response);
document.getElementById('duration').innerHTML = `Thời gian di chuyển: <b>` + (response.routes[0].duration / 60).toFixed() + ` phút </b>`;
var html = ``;
response.routes[0].steps.forEach(step => {
if (step.type == 'job'){
html += `<li>` + step.type + `: ` + step.description + `</li>`
} else {
html += `<li>` + step.type + `</li>`
}
});
document.getElementById('steps').innerHTML = html;
});
}
</script>
 
</body>
</html>