So erstellen Sie topografische Karten - Amazon Location Service

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%; }