Ma trận tính khoảng cách | Maps Javascript APIs

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

Ví dụ này sử dụng eKMap Matrix API để tính quãng đường, thời gian di chuyển giữa các điểm.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma trận tính khoảng cách</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 style="width: 30%; padding: 16px 0px; background: #fff; box-shadow: 2px 0px 7px -2px rgba(0,0,0,0.31); z-index: 1;">
<ul id="result" style="margin:0; padding-inline-start: 20px;"></ul>
</div>
<div id="map"></div>
 
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105.816, 21.038],
zoom: 13
});
var basemap = new ekmapplf.VectorBaseMap('OSM:Standard', '{YOUR_API_KEY}').addTo(map);
var featureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
color: '#FF2340',
description: 'Vị trí A'
},
geometry: {
type: 'Point',
coordinates: [105.83641, 21.04303]
}
},
{
type: 'Feature',
properties: {
color: '#C014DF',
description: 'Vị trí B'
},
geometry: {
type: 'Point',
coordinates: [105.84888, 21.03171]
}
},
{
type: 'Feature',
properties: {
color: '#3EBC5D',
description: 'Vị trí C'
},
geometry: {
type: 'Point',
coordinates: [105.80415, 21.03048]
}
}
]
};
 
map.on('load', function () {
map.addSource('points', {
type: 'geojson',
data: featureCollection
});
map.addLayer({
id: 'points-layer',
type: 'circle',
source: 'points',
paint: {
'circle-color': ['get', 'color'],
'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);
})
getMatrix();
});
 
function getMatrix() {
var MatrixService = new ekmapplf.service.Matrix({
apiKey: '{YOUR_API_KEY}',
profile: 'driving-car'
});
MatrixService.setLocations([
[105.83641, 21.04303],
[105.84888, 21.03171],
[105.804159, 21.0304848]
]);
MatrixService.setMetrics([
"duration",
"distance"
]);
MatrixService.setUnits("km");
MatrixService.run(function (error, response) {
console.log(response);
document.getElementById('result').innerHTML=`
<li> Vị trí A → Vị trí B: `+ response.distances[0][1] +` km (`+ response.durations[0][1] +`s)</li>
<li> Vị trí A → Vị trí C: `+ response.distances[0][2] +` km (`+ response.durations[0][2] +`s)</li>
<li> Vị trí B → Vị trí A: `+ response.distances[1][0] +` km (`+ response.durations[1][0] +`s)</li>
<li> Vị trí B → Vị trí C: `+ response.distances[1][2] +` km (`+ response.durations[1][2] +`s)</li>
<li> Vị trí C → Vị trí A: `+ response.distances[2][0] +` km (`+ response.durations[2][0] +`s)</li>
<li> Vị trí C → Vị trí B: `+ response.distances[2][1] +` km (`+ response.durations[2][1] +`s)</li>`;
})
};
</script>
 
 
</body>
</html>