맵의 스타일 기능을 설정하는 방법
Amazon Location Service를 사용하면 맵을 사용자 지정하는 스타일 기능을 설정할 수 있습니다. 지형, 윤곽 밀도, 트래픽 및 이동 모드 기능을 맵에 추가할 수 있습니다.
-
Terrain: 지형 시각화를 활성화하여 고도 변경 사항과 지리적 특성을 표시하므로 사용자가 매핑된 영역의 물리적 환경을 이해하는 데 도움이 됩니다.
-
ContourDensity: 지형의 가파른 정도와 고도 변화를 표시하도록 윤곽선 밀도 수준을 조정합니다.
-
Traffic: 실시간 트래픽 데이터를 오버레이하여 현재 도로 정체, 건설 및 인시던트와 같은 현재 교통 상황을 표시하므로 정보에 입각한 라우팅 결정을 내릴 수 있습니다.
-
TravelMode: 운송별 계층을 선택하여 도로 제한이 있는 대중 교통 또는 트럭 탐색에 대한 관련 라우팅 정보를 표시합니다.
이 예제에서는 확인란이 있는 맵을 생성하여 지형과 윤곽선을 개별적으로 또는 동시에 시각화합니다.
- Index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Terrain and Contour Map</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
<style>
.controls {
position: absolute;
top: 10px;
left: 10px;
background: white;
padding: 10px;
border-radius: 5px;
z-index: 1000;
}
</style>
<script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
</head>
<body>
<div class="controls">
<label><input type="checkbox" id="terrain" checked> Terrain</label><br>
<label><input type="checkbox" id="contour" checked> Contour Lines</label>
</div>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
const apiKey = "Add Your Api Key";
const mapStyle = "Standard";
const awsRegion = "us-east-1";
let terrainEnabled = true;
let contourEnabled = true;
function updateMap() {
// Built-in JavaScript API that handles URL query parameters
const params = new URLSearchParams({ key: apiKey });
if (terrainEnabled) params.append('terrain', 'Hillshade');
if (contourEnabled) params.append('contour-density', 'Medium');
const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?${params}`;
map.setStyle(styleUrl);
}
const map = new maplibregl.Map({
container: 'map',
style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&contour-density=Medium&key=${apiKey}`,
center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
zoom: 10,
});
document.getElementById('terrain').addEventListener('change', (e) => {
terrainEnabled = e.target.checked;
updateMap();
});
document.getElementById('contour').addEventListener('change', (e) => {
contourEnabled = e.target.checked;
updateMap();
});
</script>
</body>
</html>
이 예제에서는 트럭별 라우팅 정보 및 도로 제한을 표시하도록 트럭 이동 모드 계층이 활성화된 맵을 생성합니다.
- Index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Truck routing map</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh;"></div>
<script>
const apiKey = "Add Your Api Key";
const mapStyle = "Standard";
const awsRegion = "us-east-1";
const truckMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Truck&key=${apiKey}`;
const map = new maplibregl.Map({
container: 'map',
style: truckMapStyleUrl,
center: [-74.0060, 40.7128], // NYC coordinates
zoom: 12,
});
</script>
</body>
</html>
