Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
So erstellen Sie topografische Karten
Mit Amazon Location Service können Sie topografische Karten mithilfe von Terrain- und Höhendichtefunktionen erstellen, um Höhenunterschiede und geografische Merkmale zu visualisieren.
Hillshade anzeigen
Mit der Funktion Terrain können Sie Hügelschatten, Höhenunterschiede und zugehörige geografische Merkmale visualisieren.
- index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Terrain 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@5.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
</head>
<body style="margin: 0; padding: 0;">
<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 map = new maplibregl.Map({
container: 'map',
style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&key=${apiKey}`,
center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
zoom: 12,
validateStyle: false, // Disable style validation for faster map load
});
</script>
</body>
</html>
- style.css
-
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
Zeigen Sie die Höhe mit Konturdichte-Linien an
Mit Amazon Location Service können Sie Ihrer Karte Contour Density-Funktionen hinzufügen. Auf diese Weise können geografische Steilheit und Höhenunterschiede visualisiert werden.
- index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>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@5.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
</head>
<body style="margin: 0; padding: 0;">
<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 map = new maplibregl.Map({
container: 'map',
style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&key=${apiKey}`,
center: [-119.3047, 37.7887],
zoom: 12,
validateStyle: false, // Disable style validation for faster map load
});
</script>
</body>
</html>
- style.css
-
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
Zeigt sowohl Hillshade- als auch Contour Density-Linien an
Mit Amazon Location Service können Sie die Funktionen Hillshade und Contour Density auf Ihrer Karte kombinieren, um eine umfassende Geländevisualisierung zu erhalten. Dies ermöglicht eine verbesserte Tiefenwahrnehmung und ein vollständiges Verständnis der topografischen Variationen und Geländeeigenschaften.
- index.html
-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hillshade 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@5.x/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
</head>
<body style="margin: 0; padding: 0;">
<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 map = new maplibregl.Map({
container: 'map',
style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&terrain=Hillshade&key=${apiKey}`,
center: [-119.3047, 37.7887],
zoom: 12,
validateStyle: false, // Disable style validation for faster map load
});
</script>
</body>
</html>
- style.css
-
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }