Style bản đồ eKMap vệ tinh | Maps Javascript APIs

Hướng dẫn này chỉ cho bạn cách thêm Bản đồ eKMap do eKMap Platform cung cấp, hiển thị bản đồ eKMap với các phiên bản: Tiêu chuẩn; Xám

Sử dụng Javascript API new ekmapplf.SatelliteBaseMap, bạn có thể đọc thêm về cách sử dụng và các lựa chọn cho đối tượng Bản đồ nền eKMap vệ tinh tại đây

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Style bản đồ eKMap vệ tinh</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>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
.selectStyle {
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
background-color: #fff;
padding: 10px;
}
.StyleOption {
width: 120px;
}
</style>
 
<div id="map" class="map">
<div class="selectStyle">
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="standard"
name="style"
checked
onchange="changeStyleMap('standard')"
/>
<label for="standard">Tiêu chuẩn</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="gray"
name="style"
onchange="changeStyleMap('gray')"
/>
<label for="gray">Xám</label>
</div>
</div>
</div>
 
//map
<script>
var map = new maplibregl.Map({
container: 'map',
center: [110, 16],
zoom: 4,
});
var mapStandard = new ekmapplf.SatelliteBaseMap('SAT:Standard', '{YOUR_API_KEY}');
var mapGray = new ekmapplf.SatelliteBaseMap('SAT:Gray', '{YOUR_API_KEY}');
mapStandard.addTo(map);
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'standard':
mapStandard.addTo(map);
break;
case 'gray':
mapGray.addTo(map);
break;
}
}
</script>
//end
 
 
</body>
</html>