Hiển thị trình bày đơn vị hành chính bản đồ eKMap hành chính | Maps Javascript APIs

Ví dụ này hướng dẫn tùy chọn hiển thị trình bày đơn vị hành chính cấp tỉnh của bản đồ eKMap hành chính.

Bạn có thể đọc thêm về các phương thức, thuộc tính sử dụng của bản đồ eKMap hành chính: Tại đây

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hiển thị trình bày đơn vị hành chính bản đồ eKMap 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>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
.panel-radio{
position: absolute;
background: #fff;
z-index: 1;
padding: 5px;
top: 5px;
left: 5px;
align-items: center;
}
.label-form {
width: 110px;
}
.input-form {
display: flex;
align-items: center;
margin-top: 8px;
}
.input-form select {
width: 190px;
height: 24px;
padding: 0 8px;
margin-left: 8px;
box-sizing: border-box;
}
.radio-btn{
margin-left: 25px;
margin-top: 0px;
}
.btn-remove{
float: right;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="map" id="divMapId">
<div class="panel-radio">
<div class="input-form">
<strong class="label-form">Danh mục tỉnh: </strong>
<select id="provinceId" onchange="provinceChangeHandler()">
<option value=null>Chọn tỉnh/thành phố</option>
</select>
</div>
<div class="input-form">
<strong class="label-form">Hiển thị trình bày: </strong>
<input class="radio-btn" type="radio" name="visibleVal" checked onchange="setVisible(true)"><label>Visible</label>
<input class="radio-btn" type="radio" name="visibleVal" onchange="setVisible(false)"><label>None</label>
</div>
<button class="btn-remove" onclick="onRemoveFilter()">Remove Filter</button>
</div>
</div>
<script>
var map = new maplibregl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4,
hash: true
});
var bdmMap = new ekmapplf.VectorBaseMap('BDM2022:Basic', '{YOUR_API_KEY}');
bdmMap.addTo(map);
var visible = true;
var provinceId = null;
 
var administrativeService = new ekmapplf.service.Administrative('{YOUR_API_KEY}');
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,{padding: 50,maxZoom: 8.5});
}
}
if(provinceId != null){
setFilter();
}
}
 
function setVisible(value){
visible = value;
setFilter();
}
 
function setFilter(){
bdmMap.setFilter({
id: [ provinceId ],
visible: visible,
})
}
 
function onRemoveFilter(){
bdmMap.clearFilter();
provinceId = null
}
</script>
 
 
</body>
</html>