Sắp xếp điểm dữ liệu thành đường đi | Maps Javascript APIs

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

Ví dụ này sử dụng eKMap Snap to Roads API dịch vụ cung cấp tính năng cho phép khớp các điểm dữ liệu GPS (thường không nằm trên đường giao thông do luôn có sai số với dữ liệu GPS) vào mạng lưới đường để xác định, xây dựng lại quỹ đạo di chuyển hoặc đường đi tương ứng trên bản đồ.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sắp xếp điểm dữ liệu thành đường đi</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.78787, 21.04602],
zoom: 15.5
});
 
var basemap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
basemap.addTo(map);
 
var SnaptoRoadsService = new ekmapplf.service.SnaptoRoads({
apiKey: '{YOUR_API_KEY}',
profile: 'car'
});
 
//danh sach toa do
var arrCoord = [
[105.78330175145024, 21.04614441795959],
[105.78538121305992, 21.04616450160572],
[105.78787668451292, 21.04602061221084],
[105.79028419291438, 21.04602061221084],
[105.79281262639466, 21.046143730461935],
];
 
map.on('load', function () {
var featureCollection = {
type: 'FeatureCollection',
features: []
};
arrCoord.forEach((coordinate) => {
var featurePoint = {
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: coordinate
}
};
featureCollection.features.push(featurePoint);
});
map.addSource('coordinate', {
type: 'geojson',
data: featureCollection
});
map.addLayer({
id: 'Nearest-point',
type: 'circle',
source: 'coordinate',
paint: {
'circle-color': '#0000ff',
'circle-radius': 5
},
filter: ['in', '$type', 'Point']
});
getRoad()
});
 
//gọi dịch vụ
function getRoad() {
var coordinates = '';
arrCoord.forEach((coord) => {
if(coordinates) coordinates = coordinates + ';' + coord.toString();
else coordinates = coord.toString();
})
SnaptoRoadsService.setCoordinates(coordinates);
 
var paramRoute = {
overview: 'full',
geometries: 'geojson'
};
SnaptoRoadsService.run(paramRoute, function (error, data) {
console.log(data);
if (data.code == 'Ok') {
var featureData = {
type: 'Feature',
properties: {},
geometry: data.matchings[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.6
}
});
}
}
});
}
</script>
 
 
</body>
</html>