Maps Javascript APIs
eKMap PlatformMaps Javascript APIsJavascript APIĐơn vị hành chính

Đơn vị hành chính

eKMap Platform Javascript cung cấp các API có thể giúp bạn thao tác với dữ liệu đơn vị hành chính các cấp (tỉnh, huyện, xã), đường địa giới và trình bày dữ liệu với dữ liệu đơn vị hành chính

API truy vấn danh mục đơn vị hành chính

Mô tả: Cung cấp API cho phép truy vấn danh mục đơn vị hành chính các cấp tỉnh, huyện xã

new ekmapplf.service.Administrative(apiKey: String)

Parameters:

Thuộc tínhKiểuMô tả
apiKeystringKey này sẽ được đưa vào trong tất cả các yêu cầu của dịch vụ

Methods

Phương thứcGiá trị trả vềMô tả
getProvincial(callback: Function)Hàm gọi dịch vụ lấy thông tin danh mục hành chính cấp tỉnh
getDistrict(provinceId: string, callback: Function)Hàm gọi dịch vụ lấy thông tin danh mục hành chính cấp huyện theo mã tỉnh
getCommune(provinceId: string, districtId: string, callback: Function)Hàm gọi dịch vụ lấy thông tin danh mục hành chính cấp xã theo mã tỉnh và mã huyện

Example:

<!DOCTYPE html>
<html lang="en">
 
<meta charset="utf-8" />
<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' />
<title>Administrative Directory</title>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
.label-form {
width: 110px;
}
.input-form {
display: flex;
/* justify-content: flex-end; */
align-items: center;
margin-top: 8px;
}
.input-form input,
.input-form select {
width: 190px;
height: 24px;
padding: 0 8px;
margin-left: 8px;
box-sizing: border-box;
}
</style>
 
<body>
<div style="height: 100%;width: 20%;background-color: #fff;z-index: 1;position: absolute;">
<div class="input-form">
<strong class="label-form">Danh mục tỉnh: </strong>
<select id="provinceId" onchange="provinceChangeHandler()">
</select>
</div>
<div class="input-form">
<strong class="label-form">Danh mục huyện: </strong>
<select id="districtId" onchange="districtChangeHandler()">
</select>
</div>
<div class="input-form">
<strong class="label-form">Danh mục xã: </strong>
<select id="communeId" onchange="communeChangeHandler()">
</select>
</div>
</div>
<div style="width: 100%;">
<div id="divMapId" class="map"></div>
</div>
<script>
var apiKey = 'YOUR_API_KEY' // "Nhập khóa API eKMap Platform của bạn"
var map = new maplibregl.Map({
container: 'divMapId', center: [105, 17],
zoom: 4
});
var mapBDM = new ekmapplf.VectorBaseMap('BDM:Basic', apiKey);
mapBDM.addTo(map);
var administrativeService = new ekmapplf.service.Administrative(apiKey);
administrativeService.getProvincial(function(error, response){
provinces = response;
var selectProvince = document.getElementById("provinceId");
for(var i = 0; i < provinces.length; i++){
var option= document.createElement("option");
option.value = provinces[i].provinceid;
option.appendChild(document.createTextNode(provinces[i].name));
selectProvince.appendChild(option);
}
});
function provinceChangeHandler(){
provinceId = document.getElementById('provinceId').value;
for(var i = 0; i < provinces.length; i++){
if(provinces[i].provinceid == provinceId){
var bboxSplit = provinces[i].bbox.split(",");
var bbox = [[Number(bboxSplit[0]), Number(bboxSplit[1])], [Number(bboxSplit[2]), Number(bboxSplit[3])]];
map.fitBounds(bbox);
}
}
document.getElementById("districtId").innerHTML = "";
document.getElementById("communeId").innerHTML = "";
administrativeService.getDistrict(provinceId, function(error, response){
districts = response;
var selectDistrict = document.getElementById("districtId");
for(var i = 0; i < districts.length; i++){
var option= document.createElement("option");
option.value = districts[i].districtid;
option.appendChild(document.createTextNode(districts[i].name));
selectDistrict.appendChild(option);
}
});
}
function districtChangeHandler(){
districtId = document.getElementById("districtId").value;
for(var i = 0; i < districts.length; i++){
if(districts[i].districtid == districtId){
var bboxSplit = districts[i].bbox.split(",");
var bbox = [[Number(bboxSplit[0]), Number(bboxSplit[1])], [Number(bboxSplit[2]), Number(bboxSplit[3])]];
map.fitBounds(bbox);
}
}
document.getElementById("communeId").innerHTML = "";
administrativeService.getCommune(provinceId, districtId, function(error, response){
communes = response;
var selectCommune = document.getElementById("communeId");
for(var i = 0; i < communes.length; i++){
var option= document.createElement("option");
option.value = communes[i].communeid;
option.appendChild(document.createTextNode(communes[i].name));
selectCommune.appendChild(option);
}
});
}
function communeChangeHandler(){
communeId = document.getElementById("communeId").value;
for(var i = 0; i < communes.length; i++){
if(communes[i].communeid == communeId){
var bboxSplit = communes[i].bbox.split(",");
var bbox = [[Number(bboxSplit[0]), Number(bboxSplit[1])], [Number(bboxSplit[2]), Number(bboxSplit[3])]];
map.fitBounds(bbox);
}
}
}
</script>
</body>
 
</html>