Thay đổi màu sắc 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 thay đổi màu sắc trình bày đơn vị hành chính các cấp 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>Thay đổi màu sắc 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;
}
.tool-tip{
position: absolute;
z-index: 1;
top: 5px;
left: 5px;
background-color: white;
padding: 5px 10px;
font-size: 1rem;
}
.panel-color{
position: absolute;
background: #fff;
z-index: 1;
padding: 5px;
top: 40px;
left: 5px;
display: flex;
align-items: center;
}
.input-text-color{
width: 80px;
margin-left:5px;
height:20px;
}
</style>
</head>
<body>
<div class="map" id="divMapId">
<div class="panel-color">
<label for="colorFeature">Mã màu</label>
<input class="input-text-color" type="text" id="textColor" value="#95d95e" readonly>
<input type="color" id="colorFeature" value="#95d95e">
</div>
<div class="tool-tip" id="tooltip-setcolor">
Click trên bản đồ để thay đổi màu
</div>
<div class="tool-tip" id="tooltip-unsetcolor">
DoubleClick trên bản đồ để hủy thay đổi màu
</div>
</div>
<script>
var map = new maplibregl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4,
hash: true,
doubleClickZoom: false,
});
var color = "#95d95e";
var xyClick = null;
var id = [];
var bdmMap = new ekmapplf.VectorBaseMap('BDM2022:Basic', '{YOUR_API_KEY}');
bdmMap.addTo(map);
document.getElementById('colorFeature').addEventListener('change', function(evt){
document.getElementById('textColor').value = this.value;
color = this.value;
onSetColorForFeature();
})
onDisplayTooltipSetColor(true);
map.on('click', function(evt){
xyClick = [evt.point.x, evt.point.y];
onSetColorForFeature();
})
map.on('dblclick', function(){
bdmMap.clearColor();
id = [];
onDisplayTooltipSetColor(true);
})
function onSetColorForFeature(){
if(xyClick == null) return;
let features = map.queryRenderedFeatures(xyClick, {
layers: ['bdm_polygon']
});
id.push(features[0].properties.code);
bdmMap.setColor({
id: id,
color: color
})
onDisplayTooltipSetColor(false);
 
}
function onDisplayTooltipSetColor(display){
if(display){
document.getElementById('tooltip-setcolor').style.display = "";
document.getElementById('tooltip-unsetcolor').style.display = "none";
}else{
document.getElementById('tooltip-setcolor').style.display = "none";
document.getElementById('tooltip-unsetcolor').style.display = "";
}
}
</script>
 
 
</body>
</html>