Thông tin khoảng cách đến trung tâm hành chính | Maps Javascript APIs

Ví dụ này cung cấp thông tin về khoảng cách theo đường chim bay, khoảng cách theo đường bộ tại một tọa độ địa lý đến trung tâm đơn vị hành chính các cấp. Dữ liệu cung cấp trên lãnh thổ Việt Nam (click trên bản đồ để xem)

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Thông tin khoảng cách đến trung tâm hành chính</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, 17],
zoom: 4
});
 
var mapOSMBright = new ekmapplf.VectorBaseMap(
'OSM:Bright',
'{YOUR_API_KEY}'
);
var mapOSMNight = new ekmapplf.VectorBaseMap('OSM:Night', '{YOUR_API_KEY}');
mapOSMBright.addTo(map);
var distanceService = new ekmapplf.service.Distance('{YOUR_API_KEY}');
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
})
map.on('click', function (e) {
distanceService.at([e.lngLat.lng, e.lngLat.lat]).run(function (error, response) {
var innerHTML = "";
if (response.commune_center) innerHTML += "<div>Cách trung tâm " + response.commune_center.name + " " + response.commune_center.distance + "m</div>";
if (response.district_center) innerHTML += "<div>Cách trung tâm " + response.district_center.name + " " + response.district_center.distance + "m</div>";
if (response.province_center) innerHTML += "<div>Cách trung tâm " + response.province_center.name + " " + response.province_center.distance + "m</div>";
if (innerHTML != "") {
popupInfo.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(innerHTML).addTo(map);
}
});
})
</script>
 
 
</body>
</html>