Xác định phạm vi di chuyển | Maps Javascript APIs

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

Ví dụ này sử dụng eKMap Isochrone API xác định phạm vi di chuyển tại một vị trí.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Xác định phạm vi di chuyển</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: 5px;
background-color: white;
padding: 5px 10px;
font-size: 1rem;"
>
<div style="width: 100%;">
Khoảng cách di chuyển bằng
<select id="profile">
<option value="driving-car">ô tô</option>
<option value="cycling-regular">xe đạp</option>
<option value="foot-walking">đi bộ</option>
</select>
trong
<input id="range" type="number" style="width: 50px;" value="500">
<select id="range_type">
<option value="distance">mét</option>
<option value="time">giây</option>
</select>
</div>
<button style="height: 25px; width: 60px; margin-top: 5px;" id="submit">Tìm</button>
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105.814605, 21.034028],
zoom: 14
});
 
var basemap = new ekmapplf.VectorBaseMap('OSM:Standard', '{YOUR_API_KEY}').addTo(map);
 
var marker = new maplibregl.Marker()
.setLngLat([105.814605, 21.034028])
.addTo(map);
 
document.getElementById('submit').addEventListener('click',function(){
var range_type = document.getElementById('range_type').value;
var profile = document.getElementById('profile').value;
var range = document.getElementById('range').value;
 
var isochronesService = new ekmapplf.service.Isochrones({
apiKey: '{YOUR_API_KEY}',
profile: profile
});
isochronesService.setLocations([
[105.814605, 21.034028]
]);
isochronesService.setRange(
[range]
);
isochronesService.setRangeType(range_type);
isochronesService.run(function (error, response) {
console.log(response);
map.fitBounds(response.bbox,{
padding: {top: 75, bottom:25, left: 20, right: 20}
});
if ( map.getSource('isochrone') ) {
map.getSource('isochrone').setData(response.features[0]);
} else {
map.addSource('isochrone',{
type: 'geojson',
data: response.features[0]
});
}
if ( map.getLayer('isochrone-layer') ) map.removeLayer('isochrone-layer');
map.addLayer({
'id': 'isochrone-layer',
'type': 'fill',
'source': 'isochrone',
'layout': {},
'paint': {
'fill-color': '#eda43e',
'fill-opacity': 0.5
}
});
})
})
</script>
 
 
</body>
</html>