Thông tin hành lang an toàn lưới điện | Maps Javascript APIs

Ví dụ này cung cấp thông tin về hành lang an toàn lưới điện tại một tọa độ địa lý. 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 hành lang an toàn lưới điệ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>
 
<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 highVoltageService = new ekmapplf.service.HighVoltage('{YOUR_API_KEY}');
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
})
map.on('click', function (e) {
highVoltageService.at([e.lngLat.lng, e.lngLat.lat]).run(function (error, response) {
if (response != null) {
var innerHTML = "";
if (response.distance == 0) {
innerHTML = "<div>Thuộc khu vực hành lang an toàn lưới điện " + response.voltage + "</div>";
} else {
innerHTML = "<div>Cách khu vực hành lang an toàn lưới điện " + response.voltage + " " + response.distance + " m</div>";
}
popupInfo.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(innerHTML).addTo(map);
}
});
})
</script>
 
 
</body>
</html>