Bản đồ Vector Tile và Raster Tile | Maps Javascript APIs

Ví dụ sau hướng dẫn bạn cách hiển thi Bản đồ eKMap với kiểu Vector Tile hoặc Raster Tile, phù hợp với những nền tảng cũ không hỗ trợ WebGL.

Sử dụng Javascript API new ekmapplf.VectorBaseMap và new ekmapplf.RasterBaseMap, 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 tại đây

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bản đồ Vector Tile và Raster Tile</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>
.selectStyle {
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
background-color: #fff;
padding: 10px;
}
</style>
 
<div id="map">
<div class="selectStyle">
<input type="radio" class="radio-style" id="vector" name="typeMap" value="vector" checked
onchange="changeStyleMap('vector')" />
<label for="vector">Vector Tile</label>
<input type="radio" class="radio-style" id="raster" name="typeMap" value="raster"
onchange="changeStyleMap('raster')" />
<label for="raster">Raster Tile</label>
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'map', center: [105, 17],
attributionControl: false,
zoom: 4
});
var mapOSMVectorTile = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
var mapOSMRasterTile = new ekmapplf.RasterBaseMap('OSM:Bright', '{YOUR_API_KEY}');
mapOSMVectorTile.addTo(map);
 
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'vector':
mapOSMVectorTile.addTo(map);
break;
case 'raster':
mapOSMRasterTile.addTo(map);
break;
}
}
 
</script>
 
 
</body>
</html>