Display a map

``` ------ #### [ style.css ] ``` body { margin: 0; } #map { height: 100vh; } ``` ------ #### [ main.js ] ``` async function getStyleWithPreferredLanguage(preferredLanguage) { const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; return fetch(styleUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(styleObject => { if (preferredLanguage !== "en") { styleObject = setPreferredLanguage(styleObject, preferredLanguage); } return styleObject; }) .catch(error => { console.error('Error fetching style:', error); }); } const setPreferredLanguage = (style, language) => { let nextStyle = { ...style }; nextStyle.layers = nextStyle.layers.map(l => { if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l; return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`); }); return nextStyle; }; const updateLayer = (layer, prevPropertyRegex, nextProperty) => { const nextLayer = { ...layer, layout: { ...layer.layout, 'text-field': recurseExpression( layer.layout['text-field'], prevPropertyRegex, nextProperty ) } }; return nextLayer; }; const recurseExpression = (exp, prevPropertyRegex, nextProperty) => { if (!Array.isArray(exp)) return exp; if (exp[0] !== 'coalesce') return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); const first = exp[1]; const second = exp[2]; let isMatch = Array.isArray(first) && first[0] === 'get' && !!first[1].match(prevPropertyRegex)?.[0]; isMatch = isMatch && Array.isArray(second) && second[0] === 'get'; isMatch = isMatch && !exp?.[4]; if (!isMatch) return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); return [ 'coalesce', ['get', nextProperty], ['get', 'name:en'], ['get', 'name'] ]; }; ``` ------ ## Stellen Sie die bevorzugte Sprache basierend auf der Browsersprache des Endbenutzers ein In diesem Beispiel legen Sie den Aktualisierungsstil so fest, dass Kartenbeschriftungen in der Gerätesprache des Benutzers angezeigt werden. ### Legen Sie die bevorzugte Sprache anhand des Beispiels für die Browsersprache fest ------ #### [ index.html ] ```

``` ------ #### [ style.css ] ``` body { margin: 0; } #map { height: 100vh; } ``` ------ #### [ main.js ] ``` async function getStyleWithPreferredLanguage(preferredLanguage) { const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; return fetch(styleUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(styleObject => { if (preferredLanguage !== "en") { styleObject = setPreferredLanguage(styleObject, preferredLanguage); } return styleObject; }) .catch(error => { console.error('Error fetching style:', error); }); } const setPreferredLanguage = (style, language) => { let nextStyle = { ...style }; nextStyle.layers = nextStyle.layers.map(l => { if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l; return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`); }); return nextStyle; }; const updateLayer = (layer, prevPropertyRegex, nextProperty) => { const nextLayer = { ...layer, layout: { ...layer.layout, 'text-field': recurseExpression( layer.layout['text-field'], prevPropertyRegex, nextProperty ) } }; return nextLayer; }; const recurseExpression = (exp, prevPropertyRegex, nextProperty) => { if (!Array.isArray(exp)) return exp; if (exp[0] !== 'coalesce') return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); const first = exp[1]; const second = exp[2]; let isMatch = Array.isArray(first) && first[0] === 'get' && !!first[1].match(prevPropertyRegex)?.[0]; isMatch = isMatch && Array.isArray(second) && second[0] === 'get'; isMatch = isMatch && !exp?.[4]; if (!isMatch) return exp.map(v => recurseExpression(v, prevPropertyRegex, nextProperty) ); return [ 'coalesce', ['get', nextProperty], ['get', 'name:en'], ['get', 'name'] ]; }; ``` ------ # So legen Sie die politische Ansicht einer Karte fest Mit Amazon Location Service können Sie die politische Sichtweise festlegen, um sicherzustellen, dass Ihre Bewerbung den lokalen Gesetzen entspricht. Sie können eine politische Sichtweise festlegen und Karten aus verschiedenen politischen Perspektiven vergleichen. **Anmerkung** Weitere Informationen finden Sie unter [Lokalisierung und Internationalisierung](maps-localization-internationalization.md). ## Legen Sie die politische Sichtweise fest und vergleichen Sie sie mit der internationalen Perspektive In diesem Beispiel werden Sie Karten aus zwei verschiedenen politischen Ansichten erstellen und vergleichen: aus internationaler Sicht und aus Sicht der Türkei auf Zypern. ### Beispiel für einen Vergleich politischer Ansichten ------ #### [ index.html ] ``` Display a map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body { height: 100%; } #internationalView, #turkeyView { height: 100%; width: 100%; } .maps { display: flex; width: 100%; height: 100%; } ``` ------ # So filtern Sie POI auf der Karte Mit Amazon Location Service können Sie die POI (point-of-interest) -Kategorien auswählen, die für Ihren Anwendungsfall relevant sind. Erfahren Sie mehr über den Standard-Kartenstil [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi) ## POI filtern In diesem Beispiel zeigen Sie eine interaktive Karte an, auf der Benutzer nach POI-Kategorien filtern können. ------ #### [ Index.html ] ``` POI demo

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } #buttons { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; min-width: 100px; max-height: calc(100% - 2rem); overflow: auto; padding: 1rem; background-color: white; margin: 0; } .button { display: inline-block; cursor: pointer; padding: 8px; border-radius: 3px; margin-top: 10px; font-size: 12px; text-align: center; color: #fff; background: #8a8a8a; font-family: sans-serif; font-weight: bold; } .button:first-child { margin-top: 0; } .active { background: #ee8a65; } ``` ------ # 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. ### Beispiel Hillshade ------ #### [ index.html ] ``` Terrain Map

``` ------ #### [ 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. ### Beispiel für Konturdichte ------ #### [ index.html ] ``` Contour Map

``` ------ #### [ 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. ### Beispiel für Hügelschatten mit Konturdichte ------ #### [ index.html ] ``` Hillshade and Contour Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } html, body, #map { height: 100%; } ``` ------ # So zeigen Sie den Verkehr in Echtzeit auf einer Karte an Mit Amazon Location Service können Sie Ihrer Karte Verkehrsfunktionen hinzufügen. Auf diese Weise werden Verkehrsdaten in Echtzeit bereitgestellt, die aktuelle Verkehrslage wie aktuelle Verkehrsstaus, Bauarbeiten und Zwischenfälle anzeigen und Ihnen so bei der Routenwahl helfen. ## Erstellen Sie eine Karte mit Verkehrsdaten in Echtzeit Dieses Beispiel zeigt, wie eine Karte mit Verkehrsdaten in Echtzeit erstellt wird. ### Beispiel für Verkehr in Echtzeit ------ #### [ index.html ] ``` Traffic Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So erstellen Sie eine Logistikkarte Mit TravelModes dieser Funktion können Sie mithilfe von Amazon Location Service Logistikkarten erstellen. TravelModes zeigt relevante Routeninformationen für die LKW-Navigation mit den entsprechenden Straßenbeschränkungen an. Verwenden Sie [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html), um Informationen zu öffentlichen Verkehrsmitteln anzuzeigen. ## Erstellen Sie eine Karte mit Truck TravelMode Dieses Beispiel zeigt, wie eine Karte `Truck` `TravelMode` für logistisches Routing erstellt wird. ### Beispiel für einen LKW ------ #### [ index.html ] ``` Truck Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So zeigen Sie Transitdetails auf einer Karte an Mit Amazon Location Service können Sie Nahverkehrsfunktionen zu Karten hinzufügen. `Transit``TravelMode`Zeigt Routeninformationen für öffentliche Verkehrsmittel an, z. B. farblich markierte Bahnlinien. Lesen Sie auch, wie Sie die [Logistik TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) für zusätzliche Optionen einrichten. ## Erstellen Sie eine Karte mit Transitdetails Dieses Beispiel zeigt, wie Sie mit Transit TravelMode für öffentliche Verkehrsmittel eine Karte mit Nahverkehrsdetails erstellen. ### Beispiel für einen öffentlichen Verkehr ------ #### [ index.html ] ``` Transit Map

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So erstellen Sie eine 3D-Karte Mit Amazon Location Service können Sie Karten dreidimensionale Funktionen hinzufügen, z. B. `Terrain3D` um Höhendaten als dreidimensionale Oberfläche anzuzeigen oder `Buildings3D` um Stadtstrukturen mit Höhe und Volumen darzustellen. ## Erstellen Sie eine Karte mit dreidimensionalen Geländedetails Dieses Beispiel zeigt, wie eine Karte mit einem `Terrain3D` Parameter erstellt wird. ### Terrain3D-Beispiel ------ #### [ index.html ] ``` 3D Terrain

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Erstellen Sie eine Karte mit dreidimensionalen Gebäudedetails Dieses Beispiel zeigt, wie eine Karte mit `Buildings3D` Parametern erstellt wird. ### Beispiel für Buildings3D ------ #### [ index.html ] ``` 3D Buildings

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ ## Aktivieren/deaktivieren Sie die Globusansicht Dieses Beispiel zeigt, wie die Globusansichtsprojektion aktiviert oder deaktiviert wird. Standardmäßig ist die Globusansicht aktiviert. ### Beispiel für eine Globusansicht ------ #### [ index.html ] ``` Globe View

``` ------ #### [ style.css ] ``` body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } ``` ------ # So verwenden Sie statische Karten Diese Anleitungsthemen bieten step-by-step Anleitungen zur Anpassung statischer Karten mit Overlays und visuellen Elementen unter Verwendung der Kartenfunktionen von Amazon Location Service. Jede Anleitung führt Sie durch wichtige Aufgaben wie das Anpassen der Kartenabmessungen, die Wahl zwischen Zoom oder Radius und das Hinzufügen verschiedener georäumlicher Elemente wie Markierungen, Polygone, Linien und Näherungskreise. Diese Anleitungen verwenden sowohl kompakte als auch GeoJSON-Formate, um Flexibilität bei der Gestaltung und Konfiguration zu gewährleisten. Ganz gleich, ob Sie Karten für kundenorientierte Anwendungen optimieren oder Geoanalysen durchführen, diese Themen enthalten klare Anweisungen, wie Sie Ihre statischen Karten an spezifische Anforderungen anpassen können. Anhand der detaillierten Beispiele erfahren Sie, wie Sie Kartenpräsentationen verbessern und geografische Daten für eine Vielzahl von Geschäftsanforderungen effizient verwalten können. **Topics** + [So erhalten Sie eine statische Karte einer bestimmten Position](get-static-map-specific-position.md) + [So erhalten Sie eine statische Karte einer bestimmten Dimension](get-static-map-specific-dimension.md) + [So entscheiden Sie sich für eine statische Karte zwischen Radius und Zoom](choose-radius-vs-zoom.md) + [So fügen Sie einen Maßstab für eine statische Karte hinzu](add-scale-static-map.md) + [So fügen Sie einer statischen Karte eine Markierung hinzu](add-marker-static-map.md) + [So fügen Sie einer statischen Karte eine Linie hinzu](how-to-add-line-static.md) + [So fügen Sie einer statischen Karte eine Route hinzu](how-to-add-route.md) + [So fügen Sie einer statischen Karte ein Polygon hinzu](how-to-add-polygon-static.md) + [So stellen Sie die Sprache für statische Karten ein](set-language-static-map.md) + [So fügen Sie einer statischen Karte einen Näherungskreis hinzu](how-to-add-proximity-circle.md) # So erhalten Sie eine statische Karte einer bestimmten Position In diesem Thema erfahren Sie, wie Sie statische Karten anhand bestimmter Parameter von Amazon Location Service abrufen. Sie erfahren, wie Sie eine statische Karte für eine Mittelposition, einen Begrenzungsrahmen und eine Reihe begrenzter Positionen erstellen. Die bereitgestellten Beispiele helfen Ihnen dabei, die Breite, Höhe und den Stil der Karte anzupassen. **Anmerkung** `map@2x`Beim Generieren einer statischen Map müssen Sie entweder `map` oder übergeben. ## Ruft das Kartenbild für eine Mittelposition ab In diesem Beispiel erstellen Sie ein Kartenbild mit einer Breite von `1024` und einer Höhe von, `1024` wobei die Mittelpunktkoordinaten auf`-123.1143,49.2763`, wo `longitude=-123.1143` und eingestellt sind`latitude=49.2763`, und eine Zoomstufe von`15`. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15¢er=-123.1156126,49.2767046&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban layout, harbor, and large stadium visible.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-center.png) ------ ## Ruft das Kartenbild für den Begrenzungsrahmen ab In diesem Beispiel generieren Sie ein Kartenbild von Südostasien, indem Sie den Begrenzungsrahmen für das Gebiet festlegen. Das `bbox` Format ist`{southwest_longitude},{southwest_latitude},{northeast_longitude},{northeast_latitude}`. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounding-box=90.00,-21.94,146.25,31.95&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Southeast Asia, showing mainland, islands, and surrounding waters.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-bounding-box.png) ------ ## Holen Sie sich ein Kartenbild für begrenzte Positionen In diesem Beispiel generieren Sie eine Karte, die mehrere sehenswerte Orte in Paris abdeckt, die jeweils durch ihre Koordinaten (Längengrad, Breitengrad) spezifiziert sind. Zu den begrenzten Positionen gehören: Eiffelturm, Louvre-Museum, Kathedrale Notre-Dame, Champs-Élysées, Arc de Triomphe, Sacré-Cœur-Basilika, Luxemburg-Gärten, Musée d'Orsay, Place de la Concorde und Palais Garnier. Das Format für Grenzpositionen ist. `{longitude1},{latitude1},{longitude2},{latitude2} ... {longitudeN},{latitudeN}` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=2.2945,48.8584,2.3376,48.8606,2.3500,48.8529,2.3076,48.8698,2.2950,48.8738,2.3431,48.8867,2.3372,48.8462,2.3266,48.8600,2.3212,48.8656,2.3317,48.8719&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Paris showing dense urban layout, Seine River, and iconic landmarks.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-bounding-position.png) ------ # So erhalten Sie eine statische Karte einer bestimmten Dimension In diesem Thema erfahren Sie, wie Sie die Abmessungen (Höhe und Breite) für statische Karten mithilfe von Amazon Location Service festlegen. Durch das Anpassen der Abmessungen eines Kartenbilds können Sie Leistung, visuelle Qualität und Benutzerfreundlichkeit in Einklang bringen. Die Höchstwerte für beide `width` und `height` betragen 1400 Pixel, während die Minimalwerte 64 Pixel betragen. Die maximale Ergebnisgröße beträgt 6 MB. Darüber hinaus können Sie die `bounds` Parameter `bbox` und zusammen mit verwenden, `padding` um sicherzustellen, dass wichtige Kartenmerkmale in der Nähe der Kanten vollständig sichtbar und nicht abgeschnitten sind. ## Ruft ein Kartenbild mit einer bestimmten Höhe und Breite ab In diesem Beispiel erstellen Sie ein Kartenbild mit niedriger und mittlerer Auflösung von Helsinki, Finnland. ------ #### [ Request URL for low-resolution thumbnail ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=200&height=200&zoom=11.5¢er=24.9460,60.1690&key=API_KEY ``` ------ #### [ Response (Thumbnail 200x200) ] ![\[Aerial view of a coastal city with intricate waterways, islands, and urban development.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-specific-dimension-low.png) ------ #### [ Request URL for mid-resolution image ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=13¢er=24.9460,60.1690&key=API_KEY ``` ------ #### [ Response image (700x700) ] ![\[Aerial view of a coastal city with dense urban development, harbors, and surrounding waters.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-specific-dimension-mid.png) ------ ## Holen Sie sich ein Kartenbild mit Polsterung auf allen Seiten In diesem Beispiel erstellen Sie eine Karte mit mehreren sehenswerten Orten in Helsinki, Finnland, mit ihren Koordinaten (Längengrad, Breitengrad), sowohl mit als auch ohne Polsterung. ------ #### [ Request URL with padding ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY ``` ------ #### [ Response image (with padding) ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and surrounding islands.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-specific-dimension-padding.png) ------ #### [ Request URL without padding ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY ``` ------ #### [ Response image (without padding) ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and small islands.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-specific-dimension-no-padding.png) ------ # So entscheiden Sie sich für eine statische Karte zwischen Radius und Zoom In diesem Thema erfahren Sie, wie Sie zwischen der `zoom` Verwendung `radius` oder der Generierung statischer Karten mit Amazon Location Service wählen können. Der `radius` Parameter ermöglicht eine genauere Steuerung des Empfangsbereichs und eignet sich daher ideal für kundenorientierte Anwendungen, bei denen Sie den genauen Empfangsbereich kennen. Der `zoom` Parameter eignet sich besser für Geodatenanalysen, wenn Sie den angezeigten Detaillierungsgrad anpassen möchten. ## Mit Radius In diesem Beispiel erstellen Sie ein Kartenbild von Sri Lanka mithilfe des `radius` Parameters mit einer Mittelpunktposition. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700¢er=80.60596,7.76671&radius=235000&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-radius.png) ------ ## Mit Zoom In diesem Beispiel erstellen Sie ein Kartenbild von Sri Lanka mithilfe des `zoom` Parameters mit einer Mittelpunktposition. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=8¢er=80.60596,7.76671&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-zoom.png) ------ # So fügen Sie einen Maßstab für eine statische Karte hinzu In diesem Thema erfahren Sie, wie Sie eine Skala in der unteren rechten Ecke einer mit Amazon Location Service generierten statischen Karte anzeigen. Die Skala kann eine einzelne Einheit, wie `Miles` oder`Kilometers`, oder beide Einheiten, wie `KilometersMiles` oder`MilesKilometers`, anzeigen, wobei eine Einheit oben und die andere unten angezeigt wird. ## Eine Skala mit einer einzigen Einheit hinzufügen In diesem Beispiel zeigen Sie eine Karte von Helsinki, Finnland, an, deren Maßstab `Kilometers` in der unteren rechten Ecke auf eingestellt ist. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=13.5¢er=24.9189564,60.1645772&scale-unit=Kilometers&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban areas, waterways, and islands.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-scale-single.png) ------ ## Fügen Sie den Maßstab mit beiden Einheiten hinzu In diesem Beispiel zeigen Sie eine Karte von Helsinki, Finnland, mit beiden `Kilometers` und auf `Miles` der Skala in der unteren rechten Ecke, wobei eine Einheit über der anderen angezeigt wird. ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=14¢er=24.9189564,60.1645772&scale-unit=KilometersMiles&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a coastal city with dense urban areas, harbors, and islands surrounded by water.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-scale-both.png) ------ # So fügen Sie einer statischen Karte eine Markierung hinzu In diesem Thema erfahren Sie, wie Sie Markierungen zu statischen Karten hinzufügen, die mit Amazon Location Service generiert wurden. Sie können das Symbol, die Bezeichnung, die Größe, die Farbe und andere Gestaltungsoptionen der Markierung anpassen. Auf diese Weise können Sie bestimmte Orte mit visuellen Hinweisen hervorheben, die dem Zweck Ihrer Karte entsprechen. ## Formatierung von Markierungen | Name | Typ | Standard | Beschreibung | | --- | --- | --- | --- | | `style` | String | `marker` | Der Stil der Punktgeometrie. Um eine Markierung zu erstellen, setzen Sie den Wert auf `marker` oder schließen Sie das `style` Attribut nicht in das Eigenschaftenobjekt von GeoJSON ein. | | `icon` | String | `pin` | Der Typ des Markersymbols. Zu den verfügbaren Werten gehören: `cp` (Näherungskreis)`diamond`,`pin`,`poi`,`square`,,`triangle`,`bubble`. | | `label` | String | `` | Der Text, der an den Koordinaten angezeigt werden soll. Verwenden Sie die folgenden Werte, um automatische Beschriftungen festzulegen: `$alpha` (lateinisches Alphabet) oder `$num` (arabische Ziffern). | | `color` | Farbe | Abhängig vom Stil | Die Farbe des Symbols. | | `outline-color` | Farbe | Abhängig vom Stil | Die Umrissfarbe des Symbols. | | `text-color` | Farbe | Abhängig vom Stil | Die Farbe des Label-Textes. | | `text-outline-color` | Farbe | Abhängig vom Stil | Die Umrissfarbe des Textes. | | `outline-width` | Ganzzahl | `0`(ausgeschaltet) | Die Breite des Textumrisses. | | `size` | String | `medium` | Die Größe des Etiketts und des Symbols. Verfügbare Werte:`small`,`medium`,`large`. | ## Fügen Sie einem Kartenbild eine Markierung hinzu In diesem Beispiel platzieren Sie eine Markierung mit einer Bezeichnung auf dem Kartenbild von BC Place, Vancouver. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -123.11210, 49.2767875 ] }, "properties": { "color":"#EE4B2B", "size":"large", "label":"BC Place, Vancouver", "text-color":"#0000FF" } } ] } ``` `Compact`: ``` point: -123.11210,49.27678; label=BC Place, Vancouver; size=large; text-color=#0000FF; color=#EE4B2B ``` ------ #### [ Request URL ] Mit dem GeoJSON-Overlay ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23EE4B2B%22,%22size%22%3A%22large%22,%22label%22%3A%22BC%20Place,%20Vancouver%22,%22text-color%22%3A%22%230000FF%22%7D,%22geometry%22%3A%7B%22coordinates%22%3A%5B-123.11210974152168,49.27678753813112%5D,%22type%22%3A%22Point%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Vancouver's downtown and harbor, with BC Place stadium marked.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-add-marker.png) ------ ## Fügen Sie einem Kartenbild mehrere Markierungen hinzu In diesem Beispiel fügen Sie anhand ihrer Koordinaten (Längengrad, Breitengrad) Markierungen für Orte in Helsinki, Finnland, hinzu, die man gesehen haben muss. Sie können auch eine Polsterung anwenden, um sicherzustellen, dass die Karte alle Markierungen korrekt enthält. **Anmerkung** Zu den verfügbaren Markersymbolen gehören: `cp` für Näherungskreis,. `diamond, pin, poi, square, triangle, bubble` `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "MultiPoint", "coordinates": [ [24.9526, 60.1692], [24.9270, 60.1725], [24.9226, 60.1826], [24.9509, 60.1675], [24.9566, 60.1685], [24.9457, 60.1674], [24.9397, 60.1719], [24.9414, 60.1715], [24.9387, 60.1720] ] }, "properties": { "icon":"diamond", "label":"$num", "size":"large", "text-color":"%23972E2B", "text-outline-color":"%23FFF", "text-outline-width":2 } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22MultiPoint%22,%22coordinates%22%3A%5B%5B24.9526,60.1692%5D,%5B24.927,60.1725%5D,%5B24.9226,60.1826%5D,%5B24.9509,60.1675%5D,%5B24.9566,60.1685%5D,%5B24.9457,60.1674%5D,%5B24.9397,60.1719%5D,%5B24.9414,60.1715%5D,%5B24.9387,60.172%5D%5D%7D,%22properties%22%3A%7B%22icon%22%3A%22diamond%22,%22label%22%3A%22%24num%22,%22size%22%3A%22large%22,%22text-color%22%3A%22%23972E2B%22,%22text-outline-color%22%3A%22%23FFF%22,%22text-outline-width%22%3A2%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of a city with lakes, buildings, roads, and numbered markers indicating points of interest.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## Ändern Sie die Farbe der Markierung in einem Kartenbild In diesem Beispiel verwenden Sie Blasenmarkierungen in verschiedenen Farben, um Städte auf der ganzen Welt darzustellen. Sie können die Farbe, die Bezeichnung und andere Eigenschaften der Markierung an den Kontext Ihrer Karte anpassen. `Geo JSON`: ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [85.1376, 25.5941] }, "properties": { "label": "Patna", "icon": "bubble", "color": "#FF5722", "outline-color": "#D74D3D", "text-color": "#FFFFFF" } }, .....redacted..... { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.3522, 48.8566] }, "properties": { "label": "Paris, France", "icon": "bubble", "color": "#FF9800", "outline-color": "#D76B0B", "text-color": "#FFFFFF" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1400&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B85.1376,25.5941%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Patna%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF5722%22,%22outline-color%22%3A%22%23D74D3D%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B105.8542,21.0285%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Hanoi,%20Vietnam%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%232196F3%22,%22outline-color%22%3A%22%231A78C2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B116.4074,39.9042%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Beijing,%20China%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF9800%22,%22outline-color%22%3A%22%23D76B0B%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B106.9101,47.918%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Ulaanbaatar,%20Mongolia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%239C27B0%22,%22outline-color%22%3A%22%237B1FA2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B151.2093,-33.8688%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Sydney,%20Australia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%234CAF50%22,%22outline-color%22%3A%22%23388E3C%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B174.7633,-41.2865%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Wellington,%20New%20Zealand%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FFC107%22,%22outline-color%22%3A%22%23FFA000%22,%22text-color%22%3A%22%23000000%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[World map showing locations of major cities across continents with colored labels.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-change-marker-color.png) ------ # So fügen Sie einer statischen Karte eine Linie hinzu In diesem Thema erfahren Sie, wie Sie mithilfe von Amazon Location Service eine Linie zu einer statischen Karte hinzufügen. Wir werden uns mit den unterstützten Styling-Optionen befassen, wie man eine Linie mit GeoJSON definiert und wie man benutzerdefinierte Stile wie Farbe, Breite und Kontur anwendet. Wir werden auch untersuchen, wie verschiedene Maßeinheiten für Eigenschaften wie die Linienbreite verwendet werden können. ## Unterstütztes Styling | Name | Typ | Standard | Beschreibung | | --- | --- | --- | --- | | `color` | Farbe | abhängig vom Stil | Die Linienfarbe. | | `width` | Ganzzahl/Zeichenfolge | 2 | Die Linienbreite. Weitere Informationen finden Sie unter [So fügen Sie einer statischen Karte eine Linie hinzu](#how-to-add-line-static). | | `outline-color` | Farbe | abhängig vom Stil | Die Farbe des Linienumrisses. | | `outline-width` | Ganzzahl/Zeichenfolge | 0 (ausgeschaltet) | Die Breite des Umrisses. Weitere Informationen finden Sie unter [So fügen Sie einer statischen Karte eine Linie hinzu](#how-to-add-line-static). | ## Unterstützte Einheit | Einheit | Beschreibung | | --- | --- | | Ganzzahl, zum Beispiel `5` | Pixel | | Zeichenfolge ohne Einheit, zum Beispiel `"5"` | Pixel | | `"px"` | Pixel | | `"m"` | Meter | | `"km"` | Kilometer | | `"mi"` | Meilen | | `"ft"` | Füße | | `"yd"` | Yards | | `"%"` | Der Prozentsatz des Standardwerts für eine bestimmte Eigenschaft in Pixeln. Wenn der Standardwert für beispielsweise `2` Pixel `width` ist, dann `200%` sind es `4` Pixel. `%`ist ein sensibles Zeichen, das in der Anforderungs-URL als `%25` kodiert werden muss. | ## Fügt eine Zeile hinzu In diesem Beispiel fügen Sie eine Linie von einem Ort in Vancouver zum Stanley Park hinzu. Die Linie wird in einem GeoJSON-Format mit definierten Koordinaten erstellt. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "name": "To Stanley Park", "description": "An evening walk to Stanley Park." } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22name%22%3A%22To%20Stanley%20Park%22,%22description%22%3A%22An%20evening%20walk%20to%20Stanley%20Park.%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-add-line.png) ------ ## Fügen Sie der Linie einen Stil hinzu In diesem Beispiel gestalten Sie die Linie, die Sie im vorherigen Beispiel hinzugefügt haben. Dazu gehört die Definition der Farbe, Breite, Umrissfarbe und Umrissbreite der Linie, um das visuelle Erscheinungsbild der Linie auf der Karte anzupassen. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#6d34b3", "width": "9m", "outline-color": "#a8b9cc", "outline-width": "2px" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%236d34b3%22,%22width%22%3A%229m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-add-line-styling.png) ------ # So fügen Sie einer statischen Karte eine Route hinzu In diesem Thema erfahren Sie, wie Sie mithilfe von Amazon Location Service eine Route zu einer statischen Karte hinzufügen. Sie gehen die Schritte durch, um mithilfe der CalculateRoutes API eine Route zu erhalten, und visualisieren sie dann auf einer statischen Karte mit GeoJSON und benutzerdefiniertem Styling für Punkte und Linien. ## Schritte zum Hinzufügen einer Route 1. Ruft Routen von der `CalculateRoutes` API ab. Entfernen Sie Koordinaten, die auf dieselbe gerade Linie fallen, um die zu optimieren und zu verhindern LineString, dass die Abfragezeichenfolge ihr Limit erreicht. 1. Erstellen Sie ein GeoJSON-Objekt auf der Grundlage des optimierten Koordinatensatzes. 1. Nehmen Sie den ersten und letzten Punkt von LineString und fügen Sie Punktgeometrien hinzu, um die Start- und Endpositionen zu markieren. 1. Gestalten Sie die Punkte und die LineString entsprechend Ihren Geschäftsanforderungen und passen Sie Eigenschaften wie Farbe, Größe und Beschriftungen an. ## Fügen Sie eine Route im kompakten Stil hinzu In diesem Beispiel fügen Sie der in erstellten Linie eine Route mit Start- und Endpunkten hinzu[So fügen Sie einer statischen Karte eine Linie hinzu](how-to-add-line-static.md). Die Route wird mit einem benutzerdefinierten Stil definiert, einschließlich Farbe, Größe und Beschriftungen für die Start- und Endpunkte. ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#000000", "width": "20m", "outline-color": "#a8b9cc", "outline-width": "2px" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.11813, 49.28246] }, "properties": { "label": "Pacific Centre", "icon": "bubble", "size": "large", "color": "#34B3A4", "outline-color": "#006400", "text-color": "#FFFFFF" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.13574, 49.30097] }, "properties": { "label": "Stanley Park", "icon": "bubble", "size": "large", "color": "#B3346D", "outline-color": "#FF0000", "text-color": "#FFFFFF" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%23000000%22,%22width%22%3A%2220m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.11813,49.28246%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Pacific%20Centre%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%2334B3A4%22,%22outline-color%22%3A%22%23006400%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.13574,49.30097%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Stanley%20park%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%23B3346D%22,%22outline-color%22%3A%22%23FF0000%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D%5D%7D&key=API_KEY ``` ------ #### [ Response image ] ![\[Aerial view of Vancouver with Stanley Park and Pacific Centre marked, showing urban layout and coastline.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/static-add-route-compact.png) ------ # So fügen Sie einer statischen Karte ein Polygon hinzu Gebäude und Standorte können auf einer Karte hervorgehoben werden, indem ein sie umgebendes Polygon zugewiesen wird, z. B. das Pentagon (in Washington, D.C.). ## Fügen Sie ein einzelnes Polygon hinzu In diesem Beispiel fügen Sie ein Polygon (ein Fünfeck) für das Pentagon-Gebäude auf der Karte hinzu. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ [ [ -77.0579282196337, 38.87264268371487 ], [ -77.05868880963534, 38.87003145971428 ], [ -77.05560979468949, 38.86876862025221 ], [ -77.05305311263672, 38.87059509268525 ], [ -77.0546384387842, 38.872985132206225 ], [ -77.0579282196337, 38.87264268371487 ] ] ], "type": "Polygon" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=600&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Beispielkarte, die ein Polygon um das Pentagon herum zeigt.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png) ------ ## Fügen Sie ein Stilpolygon hinzu In diesem Beispiel haben wir das im vorherigen Beispiel gezeigte Polygon neu gestaltet. **Wir zeichnen das Polygon in einer anderen Farbe (\$1E3F70550).** Die Farbkomponenten sind wie folgt. + **E3** steht für die rote Komponente. + **F7** steht für die grüne Komponente. + **05** steht für die blaue Komponente. + **50** steht für die Alpha-Komponente (Opazität). ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ [ [ -77.0579282196337, 38.87264268371487 ], [ -77.05868880963534, 38.87003145971428 ], [ -77.05560979468949, 38.86876862025221 ], [ -77.05305311263672, 38.87059509268525 ], [ -77.0546384387842, 38.872985132206225 ], [ -77.0579282196337, 38.87264268371487 ] ] ], "type": "Polygon" }, "properties": { "color": "#E3F70550" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D,%22properties%22%3A%7B%22color%22%3A%22%23E3F70550%22%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Beispielkarte, die ein andersfarbiges Polygon rund um das Pentagon zeigt.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png) ------ ## Fügen Sie mehrere Polygone hinzu In diesem Beispiel fügen wir mehrere Polygone hinzu, um mehrere Parks in New York City hervorzuheben. ------ #### [ Geo JSON ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "color": "#00800050" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.95824708489555, 40.80055774655358 ], [ -73.9818875523859, 40.76810261850716 ], [ -73.9729556303776, 40.7642422333698 ], [ -73.94916953372382, 40.79699323614054 ], [ -73.95824708489555, 40.80055774655358 ] ] ] } }, { "type": "Feature", "properties": { "color": "#FF000050" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.94432602794981, 40.80634757577718 ], [ -73.94607200977896, 40.803869579741644 ], [ -73.94301654157768, 40.80263972513214 ], [ -73.94127055974795, 40.805099411561145 ], [ -73.94432602794981, 40.80634757577718 ] ] ] } }, { "type": "Feature", "properties": { "color": "#0000FF50" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.9947948382843, 40.7691390468232 ], [ -73.99564708262241, 40.76802192177411 ], [ -73.99372953286147, 40.76723992306512 ], [ -73.99289367783732, 40.76835706126087 ], [ -73.9947948382843, 40.7691390468232 ] ] ] } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%2300800050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.95824708489555,40.80055774655358%5D,%5B-73.9818875523859,40.76810261850716%5D,%5B-73.9729556303776,40.7642422333698%5D,%5B-73.94916953372382,40.79699323614054%5D,%5B-73.95824708489555,40.80055774655358%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23FF000050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.94432602794981,40.80634757577718%5D,%5B-73.94607200977896,40.803869579741644%5D,%5B-73.94301654157768,40.80263972513214%5D,%5B-73.94127055974795,40.805099411561145%5D,%5B-73.94432602794981,40.80634757577718%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%230000FF50%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.9947948382843,40.7691390468232%5D,%5B-73.99564708262241,40.76802192177411%5D,%5B-73.99372953286147,40.76723992306512%5D,%5B-73.99289367783732,40.76835706126087%5D,%5B-73.9947948382843,40.7691390468232%5D%5D%5D%7D%7D%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Beispielkarte mit mehreren Polygonen rund um Parks in NYC.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png) ------ # So stellen Sie die Sprache für statische Karten ein Sie können die Sprache für eine statische Karte festlegen, falls Sie nicht die Standardsprache verwenden möchten. In diesem Beispiel wird ein Standort in Tokio, für den normalerweise japanischer Text standardmäßig verwendet wird, in Englisch angefordert, wodurch die regionale Standardeinstellung überschrieben wird. Das Beispiel zeigt das Antwortbild für eine Anfrage, bei der die Sprache angegeben ist, und für eine Anfrage, bei der die Sprache nicht angegeben ist. Die entsprechenden Beschriftungen spiegeln den Unterschied zwischen einer Karte mit der angeforderten Sprache und einer Karte mit der Standardsprache wider. ------ #### [ Request URL - English set as the language ] ``` https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&lang=en&height=700&width=700&zoom=14 ``` ------ #### [ Response image ] ![\[Beispielkarte, die ein Polygon rund um das Pentagon zeigt.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/mapsV2/setLanguageEnglishStaticMap.png) ------ ------ #### [ Request URL - default language ] ``` https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&height=700&width=700&zoom=14 ``` ------ #### [ Response image ] ![\[Beispielkarte, die ein Polygon rund um das Pentagon zeigt.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png) ------ # So fügen Sie einer statischen Karte einen Näherungskreis hinzu Proximity Circles bieten wichtige Einblicke in die Genauigkeit eines gemeldeten oder geschätzten Geräts- oder Benutzerstandorts. Durch die Anzeige eines Kreises um den gemeldeten Punkt werden Benutzer darüber informiert, dass die tatsächliche Position aufgrund verschiedener Faktoren, die die Positionierungsgenauigkeit beeinflussen, an eine beliebige Stelle innerhalb des Kreises fallen kann. Diese zusätzliche Klarheit hilft bei der Entscheidungsfindung und erhöht die Sicherheit bei der Schifffahrt. In diesem Beispiel fügen Sie in der Nähe des Eiffelturms in Paris einen Näherungskreis von 500 Metern hinzu. ------ #### [ Request ] ``` { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 2.298151, 48.855921 ] }, "properties": { "style": "circle", "color": "#007BFF50", "width": "500m" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 2.298151, 48.855921 ] }, "properties": { "icon": "cp", "color": "#007BFF", "text-color":"#DC3545", "text-outline-color":"#007BFF", "outline-width":"20px", "label": "You are here", "size": "large" } } ] } ``` ------ #### [ Request URL ] ``` https://maps.geo.eu-central-1.amazonaws.com/v2/static/map@2x?style=Satellite&width=700&height=700&zoom=17¢er=2.2958,48.8570&geojson-overlay=%7B%20%20%22type%22%3A%20%22FeatureCollection%22,%20%20%22features%22%3A%20%5B%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22style%22%3A%20%22circle%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF50%22,%20%20%20%20%20%20%20%20%22width%22%3A%20%22500m%22%20%20%20%20%20%20%7D%20%20%20%20%7D,%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22icon%22%3A%20%22cp%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF%22,%20%20%20%20%20%20%20%20%22text-color%22%3A%22%23DC3545%22,%20%20%20%20%20%20%20%20%22text-outline-color%22%3A%22%23007BFF%22,%20%20%20%20%20%20%20%20%22outline-width%22%3A%2220px%22,%20%20%20%20%20%20%20%20%22label%22%3A%20%22You%20are%20here%22,%20%20%20%20%20%20%20%20%22size%22%3A%20%22large%22%20%20%20%20%20%20%7D%20%20%20%20%7D%20%20%5D%7D&key=your_API_Key ``` ------ #### [ Response image ] ![\[Beispielkarte, die einen Näherungskreis rund um den Eiffelturm zeigt.\]](http://docs.aws.amazon.com/de_de/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png) ------ # Kosten und Nutzung verwalten Wenn Sie sich weiter mit Amazon Location Maps vertraut machen, ist es wichtig zu verstehen, wie Sie die Servicekapazität verwalten, sicherstellen, dass Sie Nutzungsbeschränkungen einhalten und durch Kontingent- und API-Optimierungen die besten Ergebnisse erzielen. Indem Sie bewährte Verfahren für Leistung und Genauigkeit anwenden, können Sie Ihre Anwendung so anpassen, dass ortsbezogene Anfragen effizient bearbeitet und Ihre API-Anfragen optimal genutzt werden. **Topics** + [Bewährte Methoden für Amazon Location Service](maps-best-practices.md) + [Preise für Karten](maps-pricing.md) + [Kartenkontingente und Nutzung](map-quota-and-usage.md) # Bewährte Methoden für Amazon Location Service Wenn Sie mit Amazon Location Service arbeiten, stellen Sie durch die Einhaltung von Best Practices sicher, dass Ihre Karten im Hinblick auf Leistung, Genauigkeit und Benutzererfahrung optimiert sind. In diesem Abschnitt werden die wichtigsten Überlegungen zur Arbeit mit statischen Karten, geografischen Grenzen und GeoJSON-Daten zur Verbesserung der Kartenfunktionalität und -visualisierung beschrieben. ## Dynamische Karten Im Folgenden finden Sie einige bewährte Methoden für die Arbeit mit dynamischen Karten in Amazon Location Service. ### Optimierung des Renderings mit MapLibre Im Folgenden sind einige Funktionen aufgeführt, mit MapLibre deren Hilfe das Rendern für AWS Kartenstile optimiert werden kann. Weitere Informationen finden Sie unter [AWS Kartenstile und Funktionen](map-styles.md). #### Überspringen Sie die Überprüfung des Stils Wenn Sie den AWS Kartenstil verwenden, stellen Sie ihn `validateStyle` auf ein`false`. Dadurch wird die Überprüfung des Ladezeitstils deaktiviert, wodurch das anfängliche Laden der Karte beschleunigt wird. Bei AWS Kartenstilen ist keine Stilvalidierung erforderlich, da sie vorab validiert sind. ------ #### [ Example ] ``` const map = new maplibregl.Map({ container: 'map', // ID of the div where the map will render style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`, // Map style URL center: [0, 0], // Starting position [lng, lat] zoom: 2, // Starting zoom validateStyle: false, // Disable style validation for faster map load }); ``` ------ #### [ Explanation ] + `validateStyle: true`: Dies ermöglicht die Validierung des Kartenstils anhand der MapLibre GL-Stilspezifikation. Wenn es Probleme mit dem Stil gibt, werden diese in der Konsole protokolliert. + Wenn du dies auf einstellst`false`, überspringt die Map die Überprüfung des Stils, was zu einem schnelleren Laden führen kann, aber ohne Fehlerprüfung. ------ #### Wärmen Sie die Karte vor Bei einseitigen Anwendungen (SPAs), bei denen die Map beim Navigieren durch die App oft erstellt und gelöscht wird, kann die Pre-Warm-Funktion Verzögerungen bei der Neuerstellung der Map reduzieren, nachdem sie zerstört wurde. Diese Funktion wird nur empfohlen für. SPAs ## Statische Karten ### Grenzen, Begrenzungsrahmen (Box) Bei der Arbeit mit Karten und geografischen Daten ist die genaue Definition der Parameter Bounding Box (`bbox`) und Bounds von entscheidender Bedeutung, da sie das geografische Gebiet von Interesse bestimmen. Jegliche Ungenauigkeiten können zu unerwünschten Ergebnissen führen. **Sorgen Sie für präzise Grenzen** Stellen Sie sicher, dass die angegebenen Grenzen genau der Region entsprechen, die Sie anzeigen möchten. Selbst geringfügige Ungenauigkeiten können dazu führen, dass Teile des gewünschten Bereichs beschnitten oder ausgeschlossen werden, wodurch der Zweck der Visualisierung zunichte gemacht wird. **Überprüfen Sie die richtige Zoomstufe** Die Zoomstufe der Karte wird automatisch auf der Grundlage der angegebenen Grenzen oder Bbox berechnet. Stellen Sie sicher, dass die resultierende Zoomstufe für den gesamten Interessenbereich die richtige Detailgenauigkeit und Sichtbarkeit bietet. Wenn der Zoom zu hoch oder zu niedrig ist, kann die Karte die gewünschten Informationen möglicherweise nicht effektiv vermitteln. **Prüfen Sie, ob das benutzerdefinierte Overlay sichtbar ist** Wenn Sie bbox oder Bounds mit benutzerdefinierten Overlays wie GeoJSON-Features verwenden, stellen Sie sicher, dass die Ausdehnung der Features innerhalb des resultierenden Kartenbilds liegt. Features, die sich über die Grenzen hinaus erstrecken, können abgeschnitten oder weggelassen werden, was zu unvollständigen oder irreführenden Visualisierungen führt. **Verwenden Sie Padding mit bbox** Verwenden Sie die bbox zusammen mit dem Padding-Parameter, um sicherzustellen, dass Kartenelemente in der Nähe der Kanten vollständig sichtbar und nicht abgeschnitten sind. Durch die genaue Definition der Parameter bbox und bounds können Sie sicherstellen, dass Ihre Karten das gewünschte geografische Gebiet korrekt darstellen, einen angemessenen Detaillierungsgrad bieten und benutzerdefinierte Überlagerungen oder Datenebenen effektiv integrieren. ## GeoJSON Wenn Sie GeoJSON-Daten verwenden, kann Ihnen die Optimierung der Abfragezeichenfolge durch Minimierung der GeoJSON-Daten dabei helfen, die Grenzwerte für Abfragezeichenfolgen einzuhalten, insbesondere bei großen Datensätzen. # Preise für Karten Amazon Location Service bietet wettbewerbsfähige Preise für seine Maps-API, die auf der Art der Kartenanfrage und der Anzahl der API-Aufrufe basieren. Dieser Abschnitt bietet einen Überblick über die Preisstruktur für dynamische und statische Karten. Detaillierte Preisinformationen finden Sie unter [Amazon Location Service — Preise](https://aws.amazon.com/location/pricing/). ## Dynamische Karten Die Preisgestaltung für die Maps-API basiert auf der Anzahl der von der `GetTiles` API abgerufenen Kacheln Andere kartenbezogene APIs Inhalte wie `GetGlyphs``GetStyleDescriptor`, und `GetSprites` sind kostenlos. ## Statische Kartenbilder Die Preise für statische Kartenbilder basieren auf der Anzahl der Anfragen an die `GetStaticMap` API. Jede Anfrage für ein statisches Kartenbild wird bei der Preisberechnung berücksichtigt. # Kartenkontingente und Nutzung Amazon Location Service legt spezifische Servicequoten und Nutzungsbeschränkungen für dynamische und statische Karten fest. Diese Grenzwerte werden eingeführt, um eine faire Nutzung und Leistungseffizienz für alle Benutzer zu gewährleisten. Im Folgenden finden Sie die Servicekontingenten und einstellbaren Grenzwerte für jeden Dienst. ## Servicekontingente Amazon Location Service legt Standardkontingente für APIs die Verwaltung der Servicekapazität fest, die in der [AWS Service-Kontingent-Verwaltungskonsole](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) eingesehen werden können. Sie können über die [Self-Service-Konsole](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) eine Erhöhung der Kontingente beantragen, und zwar bis zu dem Doppelten des Standardlimits für jede API. Bei Kontingentlimits, die das Doppelte des Standardlimits überschreiten, fordern Sie diese über die Self-Service-Konsole an. Es wird automatisch ein Support-Ticket eingereicht. Alternativ können Sie sich mit Ihrem Premium-Supportteam in Verbindung setzen. Es fallen keine direkten Gebühren für Anfragen zur Erhöhung des Kontingents an, aber eine höhere Nutzung kann aufgrund der zusätzlich verbrauchten Ressourcen zu höheren Servicekosten führen. Weitere Informationen finden Sie unter [Kontingente mit Service Quotas verwalten](manage-quotas.md). ### Dynamische Karte | API-Name | Standard | Maximal einstellbares Limit | Mehr als einstellbares maximales Limit | | --- | --- | --- | --- | | `GetTiles` | 2000 | 4000 | Fragen Sie über die [Service-Kontingentkonsole](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) an oder wenden Sie sich an das Support-Team | ### Statische Karte | API-Name | Standard | Maximal einstellbares Limit | Mehr als einstellbares maximales Limit | | --- | --- | --- | --- | | `GetStaticMap` | 50 | 100 | Fragen Sie über die [Service-Kontingentkonsole](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas) an oder wenden Sie sich an das Support-Team | ## Nutzungsbeschränkungen | API-Name | Limit | Wert | | --- | --- | --- | | `GetStyleDescriptor` | Max. Anzahl Anfragen pro Sekunde, pro IP-Adresse. | 5000 | | `GetGlyphys` | Max. Anzahl der Anfragen pro Sekunde pro IP-Adresse. | 5000 | | `GetSprites` | Max. Anzahl der Anfragen pro Sekunde pro IP-Adresse. | 5000 | | `GetStaticMap` | Größe der Antwort-Nutzlast nach der Komprimierung. | 6 MB | | `GetTiles` | Größe der Antwort-Nutzlast nach der Komprimierung. | 6 MB | ## Bedingungen Weitere Informationen finden Sie unter [Nutzungsbedingungen und Datenzuweisung](data-attribution.md).