Điểm gần nhất trên đường giao thông | Maps Javascript APIs

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

Ví dụ này sử dụng eKMap Nearest API để tìm điểm gần nhất trên đường giao thông.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Điểm gần nhất trên đường giao thông</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 đồ để tìm điểm gần nhất trên đường giao thông
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105.85243, 21.02884],
zoom: 15.5
});
 
var basemap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
basemap.addTo(map);
 
var NearestService = new ekmapplf.service.Nearest({
apiKey: '{YOUR_API_KEY}',
profile: 'car'
});
 
var Point, marker;
map.on('click', function (evt) {
Point = evt.lngLat;
if (!marker) marker = new maplibregl.Marker().setLngLat(Point.toArray()).addTo(map);
else marker.setLngLat(Point.toArray());
GetNearest();
});
 
//gọi dịch vụ
function GetNearest() {
if (Point) {
var coordinates = Point.toArray().toString();
NearestService.setCoordinates(coordinates);
 
NearestService.run(function (error, data) {
console.log(data);
if (data.code == 'Ok') {
var featureCollection = {
type: 'FeatureCollection',
features: []
};
var featurePoint = {
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: data.waypoints[0].location
}
};
featureCollection.features.push(featurePoint);
 
var featureLine = {
type: 'Feature',
properties: {
distance: data.waypoints[0].distance.toFixed(3) + ' m',
},
geometry: {
type: 'LineString',
coordinates: [Point.toArray(), data.waypoints[0].location]
}
};
featureCollection.features.push(featureLine);
 
if (map.getSource('Nearest')) {
map.getSource('Nearest').setData(featureCollection);
} else {
map.addSource('Nearest', {
type: 'geojson',
data: featureCollection
});
map.addLayer({
id: 'Nearest-point',
type: 'circle',
source: 'Nearest',
paint: {
'circle-color': '#ffc500',
'circle-radius': 5
},
'filter': ['in', '$type', 'Point']
});
map.addLayer({
id: 'Nearest-line',
type: 'line',
source: 'Nearest',
paint: {
"line-color": "#0000ff",
"line-width": 2,
"line-dasharray": [2.6, 2.6]
},
filter: ['in', '$type', 'LineString']
},'Nearest-point'
);
map.addLayer({
id: 'Nearest-label',
type: 'symbol',
source: 'Nearest',
layout: {
'symbol-placement': 'line-center',
'text-field': '{distance}'
},
paint: {
'text-translate': [0, -10],
'text-color': 'red',
'text-halo-color': '#ffffff',
'text-halo-width': 2
},
filter: ['in', '$type', 'LineString']
});
}
}
});
}
}
</script>
 
</body>
</html>