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

Dịch vụ cung cấp thông tin chức năng sử dụng đất quy hoạch theo bản đồ quy hoạch xây dựng 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 theo bản đồ QHXD</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.Zoning({
'apiKey': api_key
});
lumLayer.addTo(map);
});
var zoningService = new ekmapplf.service.Zoning(api_key);
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
});
map.on('click', function (e) {
zoningService
.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 theo bản đồ quy hoạch xây dựng: ' +
response.planppname +
'</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>