Terrain 3D | eKAPI Docs

Hiển thị Terrain 3D với Mapbox GL JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Terrain 3D</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<div id="map"></div>
 
<script>
mapboxgl.accessToken = '{YOUR_API_KEY_MAPBOX_GL_JS}'; // "Khóa API Mapbox GL JS của bạn (https://account.mapbox.com/)"
map = new mapboxgl.Map({
container: 'map',
pitch: 70,
bearing: 60,
style: {
'version': 8,
'sources': {
'raster-dem': {
'type': 'raster-dem',
'tiles': [
'https://api.ekgis.vn/v1/maps/terrain/{z}/{x}/{y}.png?api_key={YOUR_API_KEY}'
],
'tileSize': 512,
'maxzoom': 15
},
'raster-tiles': {
'type': 'raster',
'tiles': [
'https://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}'
],
'tileSize': 256
}
},
'layers': [
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles'
}
]
},
center: [103.00781248566119, 21.61620994178317],
zoom: 12,
minZoom: 5,
maxZoom: 18
});
 
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
map.on('load', function () {
map.setTerrain({ 'source': 'raster-dem', 'exaggeration': 1.5 });
});
</script>
 
</body>
</html>