Tìm và hiển thị tuyến đường tối ưu nhất | Maps Javascript APIs

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

Ví dụ này sử dụng eKMap Traveling Salesman Problem (TSP) API dịch vụ cung cấp tính năng tìm, tính khoảng cách, thời gian di chuyển tối ưu nhất cho một phương tiện tới một tập hợp các điểm đến.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tìm và hiển thị tuyến đường tối ưu 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 id="map"></div>
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105.81909, 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);
})
getRoute()
});
 
function getRoute() {
var TSPService = new ekmapplf.service.TSP({
apiKey: '{YOUR_API_KEY}',
profile: 'car'
});
 
var arrCoord = [
[105.81665, 21.00113],
[105.91135, 21.04782],
[105.75535, 21.00520],
[105.77678, 21.05333],
];
var coordinates = '';
arrCoord.forEach((coord) => {
if (coordinates) coordinates = coordinates + ';' + coord.toString();
else coordinates = coord.toString();
})
TSPService.setCoordinates(coordinates);
 
var paramRoute = {
overview: 'full',
geometries: 'geojson',
};
TSPService.run(paramRoute, function (error, data) {
console.log(data);
if (data.code == 'Ok') {
var featureData = {
type: 'Feature',
properties: {},
geometry: data.trips[0].geometry
};
if (map.getSource('route')) {
map.getSource('route').setData(featureData);
} else {
map.addSource('route', {
type: 'geojson',
data: featureData
});
map.addLayer({
id: 'route',
type: 'line',
source: 'route',
paint: {
'line-color': '#4882c5',
'line-width': 5,
'line-opacity': 0.8
}
});
}
}
});
}
</script>
 
</body>
</html>