Thông tin sử dụng đất bản đồ QHSDĐ | Maps Javascript APIs

Dịch vụ cung cấp thông tin chức năng sử dụng đất theo bản đồ quy hoạch sử dụng đất tại một tọa độ địa lý.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Thông tin sử dụng đất bản đồ QHSDĐ</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 api_key = '{YOUR_API_KEY}';
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', api_key).addTo(
map
);
map.on('load', function () {
var lumLayer = new ekmapplf.layer.LandUse({
'apiKey': api_key
});
lumLayer.addTo(map);
});
var landuseService = new ekmapplf.service.LandUse(api_key);
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
});
map.on('click', function (e) {
landuseService
.at([e.lngLat.lng, e.lngLat.lat])
.run(function (error, response) {
if (response != undefined) {
popupInfo
.setLngLat([e.lngLat.lng, e.lngLat.lat])
.setHTML(
'<div>Tên loại đất : ' +
response.ppname +
'</div>'
)
.addTo(map);
} else {
popupInfo
.setLngLat([e.lngLat.lng, e.lngLat.lat])
.setHTML('<div>Không có dữ liệu</div>')
.addTo(map);
}
});
});
</script>
 
 
</body>
</html>