Tìm đường đi giữa hai điểm | Maps Javascript APIs

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

Ví dụ này sử dụng eKMap Route API để tìm đường đi nhanh nhất từ vị trí A đến một vị trí B

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tìm đường đi giữa hai điểm</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 style="
position: absolute;
z-index: 1;
left: 10px;
top: 10px;
background-color: white;
padding: 5px 10px;
font-size: 1rem;
">
Click trên bản đồ để xác định điểm tìm đường
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
 
/* Bản đồ nền */
var basemap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
basemap.addTo(map);
 
//===Chỉ đường
 
//khởi tạo
var routingService = new ekmapplf.service.Routing({
apiKey: '{YOUR_API_KEY}',
profile: 'car'
});
 
//ví dụ click trên bản đồ để xác định 2 điểm
var startPoint, endPoint, markerStart, markerEnd;
map.on('click', function (evt) {
if (!startPoint) startPoint = evt.lngLat;
 
if (!endPoint) endPoint = evt.lngLat;
else {
startPoint = endPoint;
endPoint = evt.lngLat;
}
if (!markerStart)
markerStart = new maplibregl.Marker()
.setLngLat(startPoint.toArray())
.addTo(map);
else markerStart.setLngLat(startPoint.toArray());
 
routing();
});
 
//gọi dịch vụ tìm đường
function routing() {
if (startPoint && endPoint && startPoint != endPoint) {
if (!markerEnd)
markerEnd = new maplibregl.Marker({ color: 'red' })
.setLngLat(endPoint.toArray())
.addTo(map);
else markerEnd.setLngLat(endPoint.toArray());
 
var coordinates = startPoint.toArray().toString() + ";" + endPoint.toArray().toString();
routingService.setCoordinates(coordinates); // thiết lập cặp điểm đầu và cuối
 
//xác định được đường đi
var paramRoute = {
overview: "full",
alternatives: false,
steps: false,
geometries: "geojson",
}
routingService.getRoute(paramRoute, function(error, data){
var featureData = {
'type': 'Feature',
'properties': {},
'geometry': data.routes[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': 7
}
});
}
})
}
}
</script>
 
 
</body>
</html>