ol mapbox style Download - ol mapbox style Source Code Download

ol mapbox style

Anderer Quellcode

v12.3.5

Herunterladen

Ol-Mapbox-Stil

Erstellen Sie OpenLayers -Karten aus Mapbox -Spezifikationsobjekten.

Erste Schritte

Erhalten Sie einen Eindruck von dem, was diese Bibliothek tut, indem Sie die Live -Beispiele untersuchen.

Installation

Um die Bibliothek in einer Anwendung mit einer NPM -basierten Entwicklerumgebung zu verwenden, installieren Sie sie mit

 npm install ol-mapbox-style

Importieren Sie bei der Installation einfach das Modul im OL-Mapbox-Stil, wie im folgenden Verwendungsbeispiel. Um einen eigenständigen Build von OL-Mapbox-Stil zu verwenden, geben Sie einfach 'Dist/Olms.js' auf Ihrer HTML-Seite auf und greifen Sie auf die exportierten Funktionen des globalen olms Objekts (z. B. olms.apply() , olms.applyBackground() ) zu. . Beachten Sie, dass der eigenständige Build vom vollen Aufbau von OpenLayers abhängt.

OL-MAPBOX-Stil> = V9 erfordert OpenLayers Version> = 7 .

Der v8 im Ol-Mapbox-Stil erfordert OpenLayers Version> = 6.13.0 <7 .

Verwendung

Die vollständige Dokumentation finden Sie im API -Abschnitt.

Der folgende Code erstellt eine OpenLayers -Karte aus dem hellen V9 -Stil von MAPBOX unter Verwendung eines https:// url:

 import { apply } from 'ol-mapbox-style' ;

apply ( 'map' , 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=YOUR_MAPBOX_TOKEN' ) ;

Verwenden Sie an applyStyle() , um nur einer Ebene Stil und Quelle zuzuweisen. mapbox:// URLs werden ebenfalls unterstützt:

 import { applyStyle } from 'ol-mapbox-style' ;
import VectorTileLayer from 'ol/layer/VectorTile.js'

const layer = new VectorTileLayer ( { declutter : true } ) ;
applyStyle ( layer , 'mapbox://styles/mapbox/bright-v9' , { accessToken : 'YOUR_MAPBOX_TOKEN' } ) ;

Um die Eigenschaften der background des MapBox -Stils auf die Karte oder eine VectorTile Ebene anzuwenden, verwenden Sie die Funktion applyBackground() .

Es gibt auch eine API auf niedriger Ebene. Verwenden Sie das stylefunction -Modul, um eine Stilfunktion für einzelne OpenLayers -Vektor- oder Vektorfliesenschichten zu erstellen:

 import { stylefunction } from 'ol-mapbox-style' ;
import VectorLayer from 'ol/layer/Vector.js' ;
import VectorSource from 'ol/source/Vector.js' ;
import GeoJSON from 'ol/format/GeoJSON.js' ;

const layer = new VectorLayer ( {
  source : new VectorSource ( {
    format : new GeoJSON ( ) ,
    url : 'data/states.geojson'
  } )
} ) ;

fetch ( 'data/states.json' ) . then ( function ( response ) {
  response . json ( ) . then ( function ( glStyle ) {
    stylefunction ( layer , glStyle , 'states' ) ;
  } ) ;
} ) ;

Beachten Sie, dass diese API auf niedriger Ebene keine Quelle für die Ebene erstellt und zusätzliche Arbeiten erforderlich sind, um die Sprite-Handhabung für Styles einzurichten, die Symbole verwenden.

Kompatibilitätsnotizen

Schriftbearbeitung

ol-mapbox-style kann PBF/SDF-Glyphen für die text-font Layouteigenschaft nicht verwenden, wie in der Mapbox-Style-Spezifikation definiert. Stattdessen beruht es auf Web -Schriftarten. Eine ol:webfonts Metadata -Eigenschaft kann auf der Stammin des Style -Objekts festgelegt werden, um einen Speicherort für WebFonts anzugeben, z. B.

 {
  "version" : 8 ,
  "metadata" : {
    "ol:webfonts" : "https://my.server/fonts/{font-family}/{fontweight}{-fontstyle}.css"
  }
  // ...
}

Alternativ können die Option webfonts der Funktionen apply() oder applyStyle() verwendet werden.

Die folgenden Platzhalter können in der Vorlagen -URL verwendet werden:

{font-family} : CSS-Schriftfamilie in Kleinbuchstaben umgewandelt, Rohlinge ersetzt durch-, z. B. Noto-sans
{Font+Family} : CSS -Schriftfamilie im Originalfall, Blankchen ersetzt durch+, z. B. Noto+Sans
{fontweight} : CSS -Schriftgewicht (numerisch), z. B. 400, 700
{fontstyle} : CSS -Schriftstil, z. B. normal, kursiv
{-fontstyle} : CSS -Schriftart anders als normal, z.

Wenn keine metadata['ol:webfonts'] für das Style -Objekt verfügbar sind, werden FONTSOURCE -Schriftarten verwendet. Es ist auch möglich, dass die Anwendung andere Schriftarten unter Verwendung von CSS lädt. Wenn im Browser bereits eine Schriftart verfügbar ist, wird sie nicht ol-mapbox-style .

Aufgrund dieses Unterschieds wird der Schriftstapel etwas anders behandelt als in der Spezifikation definiert: Stil und Gewicht werden aus der primären Schriftart (dh der erste im Schriftstapel) entnommen. Nachfolgende Schriftarten im Schriftstapel werden nur verwendet, wenn die primäre Schriftart nicht verfügbar/geladen ist, und sie werden mit dem Stil und dem Gewicht der primären Schriftart verwendet.

Bau der Bibliothek

 npm run build

Die resultierenden Verteilungsdateien befinden sich im dist/ Ordner. Um die Bibliothek in Aktion zu sehen, navigieren Sie zu dist/index.html .

Um Test lokal auszuführen, laufen Sie

 npm test

Laufen Sie zum Debuggen von Tests im Browser

 npm run karma

Öffnen Sie einen Browser auf dem Host und dem Port, der in der Konsolenausgabe angegeben ist (normalerweise http: // localhost: 9876/) und klicken Sie auf die Schaltfläche "Debug", um zur Debug -Umgebung zu gelangen.

API

OL-MAPBOX-Stil • Dokumente

<in Interne>

Index

Schnittstellen

ApplyStyleoptions
FeatureIdentifier
Optionen
Optionen

Geben Sie Aliase ein

Ressourcentyp

OL-MAPBOX-Stil • Dokumente

Schnittstelle: applyStyleoptions

Eigenschaften

Schichten

Schichten : string []

Schichten. Wenn keine Quelle bereitgestellt wird, werden die Ebenen mit den bereitgestellten IDs aus dem layers -Array des Stils verwendet. Alle Schichten müssen dieselbe Quelle verwenden.

Quelle

Quelle : string

Quelle. Standard ist '' , wodurch die erste Quelle im Stil verwendet wird.

UpdateSource

UpdateSource : boolean

Layer -Quelle (TECTIRE) Vektor (TILE) mit den für die Quelle angegebenen Parametern in der Definition des Mapbox -Stils.

OL-MAPBOX-Stil • Dokumente

Schnittstelle: FeatureIdentifier

Eigenschaften

Ausweis

ID : string | number

Die Feature -ID.

Quelle

Quelle : string

Die Quell -ID.

OL-MAPBOX-Stil • Dokumente

Schnittstelle: Optionen

Eigenschaften

AccessToken

AccessToken : string

Das Access -Token für Ihren Mapbox -Stil. Dies muss für mapbox:// -Stil -URLs bereitgestellt werden. Für https:// und andere URLs muss jeder Zugriffsschlüssel der letzte Abfrageparameter der Style -URL sein.

Hintergrund

Hintergrund : false | BackgroundColor

Hintergrundfarbe für die Schicht. Wenn nicht angegeben, wird der Hintergrund des Objekts im Mapbox -Stil verwendet. Setzen Sie auf false um zu verhindern, dass der Hintergrund des Mapbox -Stils verwendet wird.

Klassenname

Klassenname : string

Ein CSS -Klassenname, der auf das Ebenenelement eingestellt ist.

Enttäuschung

Deklotter : boolean

Enttäuschung Bilder und Text. Die Entstörung wird auf alle Bild- und Textstile aller Vektor- und Vektilschichten angewendet, die dies auf true gesetzt haben. Die Priorität wird durch den Z-Index der Schicht, den zIndex des Stils und die Renderreihenfolge der Merkmale definiert. Höheres Z-Index bedeutet eine höhere Priorität. Innerhalb desselben Z-Index hat eine vor einer andere vorgesehene Funktion eine höhere Priorität.

Als Optimierung werden Merkmale aus Schichten mit demselben className über den Füll- und Schlaganfallstilen aller dieser Schichten unabhängig von Z-Index gerendert. Um dieses Verhalten abzuteilen und DECtutterd-Funktionen mit ihrer eigenen Ebene zu platzieren, konfigurieren Sie die Ebene mit einem anderen className als ol-layer .

Ausmaß

Ausmaß : Extent

Das Begrenzungsausmaß für die Schichtwiedergabe. Die Schicht wird außerhalb dieses Ausmaßes nicht gerendert.

Schichten

Schichten : string []

Begrenzen Sie das Rendern auf die Liste der eingeschlossenen Ebenen. Alle Schichten müssen dieselbe Vektorquelle teilen. Wenn Ihr Stil mehr als eine Quelle verwendet, müssen Sie entweder die source oder die layers -Eigenschaft verwenden, um das Rendern auf eine einzelne Vektorquelle zu begrenzen.

Karte

Karte : Map

Legt die Ebene als Überlagerung auf einer Karte fest. Die Karte verwaltet diese Ebene nicht in ihrer Schichtsammlung, und die Ebene wird oben gerendert. Dies ist nützlich für temporäre Schichten. Die Standardmethode, um einer Karte eine Ebene hinzuzufügen und sie von der Karte verwalten zu lassen, besteht darin, map.addLayer() zu verwenden.

MaxResolution

MaxResolution : number

Die maximale Auflösung (exklusiv), unter der diese Schicht sichtbar ist. Wenn weder maxResolution noch minZoom definiert sind, entspricht die maxResolution der Ebene mit dem minzoom der Stilquelle.

Maxzoom

Maxzoom : number

Die maximale Zoomebene (inklusive), auf der diese Schicht sichtbar ist.

Minr -Lösung

MINRELESSONATION : number

Die minimale Auflösung (inklusive), bei der diese Schicht sichtbar ist.

Minzoom

Minzoom : number

Die Zoomebene der Mindestansicht (exklusiv), über dem diese Schicht sichtbar ist. Wenn weder maxResolution noch minZoom definiert sind, passt der minZoom der Ebene mit dem minzoom der Stilquelle überein.

Opazität

Opazität : number

Deckkraft (0, 1).

Vorspannung

Vorspannung : number

Vorspannung. Laden Sie die Fliesen mit niedriger Auflösung auf preload . 0 bedeutet kein Vorladen.

Eigenschaften

Eigenschaften : object

Willkürliche beobachtbare Eigenschaften. Kann mit #get() und #set() zugegriffen werden.

RenderBuffer

RenderBuffer : number

Der Puffer in Pixeln um die vom Renderer verwendete Kachelausdehnung, wenn sie Funktionen aus der Vektorfliesen für das Rendering oder die Trefferfunktion erhalten. Empfohlener Wert: Vektorfliesen werden normalerweise mit einem Puffer erzeugt, sodass dieser Wert mit dem größtmöglichen Puffer der verwendeten Kacheln übereinstimmt. Es sollte mindestens die Größe des größten Punktsymbols oder der Linienbreite sein.

Rendermodes

Rendermode : VectorTileRenderType

Rendernmodus für Vektorfliesen rendern:

'hybrid' : Polygon und Linienelemente werden als Bilder gerendert, sodass Pixel während der Zoomanimationen skaliert werden. Punktsymbole und -texte werden als Vektoren genau gerendert und können auf gedrehten Ansichten aufrecht bleiben.
'vector' : Alles wird als Vektoren gerendert. Verwenden Sie diesen Modus für eine verbesserte Leistung auf Vektorfliesenschichten mit nur wenigen gerenderten Merkmalen (z. B. zum Hervorheben einer Untergruppe von Merkmalen einer anderen Ebene mit derselben Quelle).

Renderorder

RenderOrder : OrderFunction

Reihenfolge rendern. Funktionen, die bei der Sortierung von Funktionen vor dem Rendering verwendet werden sollen. Standardmäßig werden Funktionen in der Reihenfolge gezeichnet, die sie erstellt werden. Verwenden Sie null , um die Sortierung zu vermeiden, aber erhalten Sie eine undefinierte Ziehauftrag.

Quelle

Quelle : string

Wenn Ihr Stil mehr als eine Quelle verwendet, müssen Sie entweder die source oder die layers -Eigenschaft verwenden, um das Rendern auf eine einzelne Vektorquelle zu begrenzen. Die source entspricht der ID einer Vektorquelle in Ihrem Mapbox -Stil.

Styleurl

Styleurl : string

Die URL des Objekts im Mapbox -Stil für diese Ebene. Für einen mit MAPBOX Studio erstellten Stil und auf MapBox gehostet werden, sieht dies wie "MAPBOX: // Styles/You/Your Style" aus.

UpdateWileanimimating

updateWileanimating : boolean

Wenn Sie auf true gesetzt sind, werden Feature -Chargen während der Animationen nachgebildet. Dies bedeutet, dass keine Vektoren angezeigt werden, aber die Einstellung hat einen Leistungseinfluss für große Mengen an Vektordaten. Wenn sie auf false gesetzt sind, werden Chargen nachgebaut, wenn keine Animation aktiv ist.

Aktualisieren Sie mit dem Intenaktieren

Update THE INTERACTING : boolean

Wenn sie auf true gesetzt sind, werden Feature -Chargen während der Interaktionen nachgebildet. Siehe auch updateWhileAnimating .

useInterimtilesOnerError

UseInterimTilesOnError : boolean

Verwenden Sie Zwischenfliesen für Fehler.

sichtbar

sichtbar : boolean

Sichtweite.

Zindex

Zindex : number

Der Z-Index für die Schichtwiedergabe. Zum Zeitpunkt der Renderung werden die Schichten zuerst von Z-Index und dann per Position bestellt. Bei undefined zIndex von 0 wird für Schichten angenommen, die zur layers der Karte hinzugefügt werden, oder Infinity , wenn die setMap() -Methode der Ebene verwendet wurde.

OL-MAPBOX-Stil • Dokumente

Schnittstelle: Optionen

Eigenschaften

AccessToken

AccessToken : string

Zugriff auf Token für 'MAPBOX: //' URLs.

AccessTokenParam

AccessTokenParam : string

Zugriff auf Token Param. Für interne Verwendung.

GetImage ()

GetImage : ( arg0 , arg1 ) => string | HTMLCanvasElement | HTMLImageElement

Funktion, die ein Bild für einen Symbolnamen zurückgibt. Wenn das Ergebnis ein htmlimageElement ist, muss es bereits geladen werden. Die Ebene kann verwendet werden, um die Schicht aufzurufen. Diese Funktion wird für Symbole verwendet, die nicht im Sprite oder zum Überschreiben von Sprite -Symbolen überschreiben.

Parameter

• arg0 : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

• Arg1 : string

Zurück

string | HTMLCanvasElement | HTMLImageElement

Vorsprung

Projektion : string

Nur nützlich bei der Arbeit mit nicht standardmäßigen Projektionen. Code einer bei OpenLayers registrierten Projektion. Alle Quellen des Stils müssen in dieser Projektion bereitgestellt werden. Die Projektion muss auch ein gültiges Ausmaß definiert haben, mit dem die Herkunft und Auflösungen des Fliesengitters für alle gefliesten Quellen des Stils bestimmen. Wenn die BBox-Platzhalter in Fliesen- und Geojson-URLs ändert: Die Standardeinstellung ist {bbox-epsg-3857} . Wenn die Projektion auf EPSG:4326 festgelegt ist, wird der Bbox-Platzhalter {bbox-epsg-4326} sein.

Auflösungen

Auflösungen : number []

Nur nützlich bei der Arbeit mit nicht standardmäßigen Projektionen. Auflösungen für die Zuordnung der Auflösung in den im Mapbox -Stil verwendeten zoom .

Styleurl

Styleurl : string

URL des Mapbox GL -Stils. Erforderlich für Stile, die als Objekt bereitgestellt wurden, wenn sie eine relative Sprite -URL enthalten, oder Quellen, die Daten nach relativer URL verweisen.

TransformRequest ()

TransformRequest : ( arg0 , arg1 ) => string | void | Request | Promise < string | Request >

Funktion zur Steuerung der Ressourcen ol-mapbox-style . Kann zum Ändern der URL, zum Hinzufügen von Headern oder zum Einstellen von Anmeldeinformationen verwendet werden. Mit der URL und dem Ressourcentyp als Argumente soll diese Funktion eine Request oder eine URL string oder ein Versprechen zurückgeben. Ohne Rückgabewert wird die ursprüngliche Anfrage nicht geändert.

Parameter

• arg0 : string

• ARG1 : ResourceType

Zurück

string | void | Request | Promise < string | Request >

Webfonts

Webfonts : string

Vorlage zur Behebung von Webfonts. Kann verwendet werden, um anzugeben, wo Sie Web -Schriftarten abrufen, wenn keine ol:webfonts -Metadaten im Style -Objekt festgelegt sind. Weitere Informationen finden Sie im Abschnitt getFonts() und im Abschnitt" Schriftart "in README.md .

OL-MAPBOX-Stil • Dokumente

Geben Sie alias ein: ressourcetyp

Resourcetyp <>: "Style" | "Source" | "Sprite" | "SpriteImage" | "Tiles" | "GeoJSON"

Geben Sie Parameter ein

OL-MAPBOX-Stil • Dokumente

Ol-Mapbox-Stil

Module

<in Interne>

Klassen

MapBoxVectorLayer

Funktionen

AddMapBoxLayer
anwenden
Antragsbackground
applystyle
GetFeaturestate
GetLayer
Getlayer
GetMapboxLayer
Getource
GetStyleforlayer
RecordStylelayer
removemapboxlayer
Rendertransparent
SetFeaturestate
Stylefunktion
UpdatemapboxLayer
UpdatemapboxSource

Referenzen

Standard

Umbenennen und Reexports bewerben

OL-MAPBOX-Stil • Dokumente

Klasse: MapBoxVectorLayer

ClassDesc

 import { MapboxVectorLayer } from 'ol-mapbox-style' ;

Eine Vektorfliesenschicht basierend auf einem Kartenbox -Stil, der eine einzelne Vektorquelle verwendet. Konfigurieren Sie die Ebene mit dem styleUrl und accessToken der in der Freigabe von MapBox Studio gezeigt ist. Wenn der Stil mehr als eine Quelle verwendet, verwenden Sie die source , um eine einzelne Vektorquelle auszuwählen. Wenn Sie eine Teilmenge der Ebenen im Stil rendern möchten, verwenden Sie die layers -Eigenschaft (alle Schichten müssen dieselbe Vektorquelle teilen). Weitere Informationen finden Sie in den Konstruktoroptionen.

 const map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 1,
  }),
  layers: [
    new MapboxVectorLayer({
      styleUrl: 'mapbox://styles/mapbox/bright-v9',
      accessToken: 'your-mapbox-access-token-here',
    }),
  ],
  target: 'map',
});

Bei Konfiguration oder Ladefehler löst die Ebene ein 'error' aus. Hörer erhalten ein Objekt mit einer error , mit der das Problem diagnostiziert werden kann.

Hinweis für Benutzer des vollständigen Builds : Der MapboxVectorLayer muss ebenfalls geladen werden.

Param

Optionen.

Feuer

Modul: OL/Ereignisse/Ereignisse ~ BasisEvent#Ereignis: Fehler

API

Erstreckt sich

VectorTileLayer

Konstruktoren

neuer MapBoxVectorLayer ()

Neue MapBoxVectorLayer ( options ): MapboxVectorLayer

Parameter

• Optionen : Options

Ebenenoptionen. Zumindest müssen styleUrl und accessToken bereitgestellt werden.

Zurück

MapboxVectorLayer

Überschreiben

VectorTileLayer.constructor

Eigenschaften

AccessToken

AccessToken : string

OL-MAPBOX-Stil • Dokumente

Funktion: addMapboxLayer ()

AddMapBoxLayer ( mapOrGroup , mapboxLayer , beforeLayerId ?): Promise void

Fügen Sie dem Stil ein neues Mapbox -Layer -Objekt hinzu. Die Karte wird erneut gerendert.

Parameter

• MaporGroup : Map | LayerGroup

Die apply der Karte oder der Schichtgruppe wurde aufgerufen.

• MapBoxLayer : any

MAPBOX -Ebenenobjekt.

• BeeLayerid? : string

Optionale ID der Mapbox -Ebene vor der neuen Ebene, die hinzugefügt wird.

Zurück

Promise void

Löst, wenn die hinzugefügte Ebene verfügbar ist.

OL-MAPBOX-Stil • Dokumente

Funktion: anwenden ()

anwenden ( mapOrGroupOrElement , style , options ): Promise < Map | LayerGroup >

Lädt und wendet ein Objekt im Mapbox -Stil in eine OpenLayers -Karte oder eine Ebenengruppe an. Dies schließt den Kartenhintergrund, die Ebenen und für Karteninstanzen ein, die keine Ansicht definiert haben, aber auch das Zentrum und den Zoom.

Beispiel:

 import apply from 'ol-mapbox-style' ;

apply ( 'map' , 'mapbox://styles/mapbox/bright-v9' , { accessToken : 'YOUR_MAPBOX_TOKEN' } ) ;

Das Zentrum und der Zoom werden nur dann festgelegt, wenn sie im Dokument im MapBox -Stil vorhanden sind, und wenn nicht bereits auf der OpenLayers -Karte festgelegt wird.

Die Schicht werden zur OpenLayers -Karte hinzugefügt, ohne dass Schichten, die möglicherweise bereits auf der Karte festgelegt sind, beeinträchtigen.

Ebenen von apply() haben zwei zusätzliche Eigenschaften:

mapbox-source : Die id des Dokuments des MapBox-Stils, aus der die OpenLayers-Ebene erstellt wurde. Normalerweise apply() erstellt eine OpenLayers -Ebene pro Quelle im Mapbox -Stil, es sei denn, der Ebenenstapel enthält Ebenen aus verschiedenen Quellen dazwischen.
mapbox-layers : Die id der Layers des Mapbox-Stils, die in der OpenLayers-Ebene enthalten sind.

Diese Funktion legt eine zusätzliche Eigenschaft mapbox-style auf der OpenLayers-Karte oder der LayerGroup-Instanz fest, die das Objekt im MapBox-Stil enthält.

Parameter

• MAPORGROPORELEMENT : string | Map | LayerGroup | HTMLElement

Entweder eine vorhandene OpenLayers -MAP -Instanz oder ein HTML -Element oder die ID eines HTML -Elements, das das Ziel einer neuen OpenLayers -Karte oder einer Ebenengruppe ist. Wenn die Schichtgruppe, werden Stile zur Karte und der Ansicht ignoriert.

• Stil : any

JSON -Style -Objekt oder Style -URL, die auf ein Mapbox Style -Objekt hinweist. Bei Verwendung von MAPBox -APIs ist die URL das styleUrl das im "Share" -Panel von MapBox Studio gezeigt wird. Darüber hinaus muss die Option accessToken (siehe unten) festgelegt werden. Wenn sie als JSON -Style -Objekt bestanden werden, sind alle von apply() erstellten OpenLayers -Ebenen sofort verfügbar, aber sie haben möglicherweise noch keine Quelle (dh wenn sie durch eine Tilejson -URL im Dokument im Mapbox -Stil definiert werden). Wenn die Map als Style -URL bestanden wird, werden Ebenen hinzugefügt, wenn das Mapbox -Dokument geladen und analysiert wird.

• Optionen : Options = {}

Optionen.

Zurück

Promise < Map | LayerGroup >

Ein Versprechen, das nach allen Schichten der OpenLayers -Karteninstanz oder der Layer -Gruppen, ihren Quellen und ihren Stilen hinzugefügt wurde. Der resolve -Rückruf wird mit der OpenLayers -Karteninstanz oder der Layergruppe als Argument aufgerufen.

OL-MAPBOX-Stil • Dokumente

Funktion: Antragsbackground ()

Antragsbackground ( mapOrLayer , glStyle , options ): Promise any

Wendet Eigenschaften der ersten background des MapBox -Stils auf die bereitgestellte Karte oder Ebene (Gruppe) an.

Beispiel:

 import { applyBackground } from 'ol-mapbox-style' ;
import { Map } from 'ol' ;

const map = new Map ( { target : 'map' } ) ;
applyBackground ( map , 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN' ) ;

Parameter

• MaporLayer : Map | BaseLayer

OpenLayers Map oder Layer (Gruppe).

• Glstyle : any

Mapbox Style -Objekt oder URL.

• Optionen : Options = {}

Optionen.

Zurück

Promise any

Versprechen, die sich beschließt, wenn der Hintergrund angewendet wird.

OL-MAPBOX-Stil • Dokumente

Funktion: ApplyStyle ()

ApplyStyle ( layer , glStyle , sourceOrLayersOrOptions ?, optionsOrPath ?, resolutions ?): Promise any

Wendet eine Stilfunktion auf eine ol/layer/VectorTile oder ol/layer/Vector mit einer ol/source/VectorTile oder einem ol/source/Vector an. Wenn die Ebene noch keine Quelle hat, wird sie aus den Informationen in der glStyle erstellt und bevölkert (es sei denn, updateSource ist auf false festgelegt).

Beispiel:

 import { applyStyle } from 'ol-mapbox-style' ;
import { VectorTile } from 'ol/layer.js' ;

const layer = new VectorTile ( { declutter : true } ) ;
applyStyle ( layer , 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_OPENMAPTILES_TOKEN' ) ;

Die Stilfunktion rendert alle Ebenen aus dem glStyle -Objekt, die die Quelle der ersten Ebene, der angegebenen source oder einer Teilmenge von Schichten aus derselben Quelle verwenden. Die Quelle muss ein "type": "vector" oder "type": "geojson" -Erigkeit.

Zwei weitere Eigenschaften werden auf der bereitgestellten Ebene eingestellt:

mapbox-source : Die id des Dokuments des MapBox-Stils, aus der die OpenLayers-Ebene erstellt wurde. Normalerweise apply() erstellt eine OpenLayers -Ebene pro Quelle im Mapbox -Stil, es sei denn, der Ebenenstapel enthält Ebenen aus verschiedenen Quellen dazwischen.
mapbox-layers : Die id der Layers des Mapbox-Stils, die in der OpenLayers-Ebene enthalten sind.

Parameter

• Schicht : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

OpenLayers -Schicht. Wenn die Ebene eine Quelle konfiguriert hat, wird sie geändert, um die Konfiguration aus der source des Glstyle zu verwenden. Die auf der Quelle der Ebene angegebenen Optionen überschreiben diejenigen aus der source des Glstyle, mit Ausnahme von url und tileUrlFunction . Wenn die Quellprojektion der Standard ist ( EPSG:3857 ), wird auch der tileGrid überschrieben. Wenn Sie die Quelle nicht ändern möchten, konfigurieren Sie den ol-mapbox-Stil, konfigurieren Sie applyStyle() mit der Option updateSource: false .

• Glstyle : any

Mapbox Style -Objekt.

• SourceorLayerSoroptions? : string | string [] | Options & ApplyStyleOptions = ''

Optionen oder source oder ein Array von Ebenen id im MapBox -Stilobjekt. Wenn ein source bereitgestellt wird, werden alle Ebenen für die angegebene Quelle in die Stilfunktion aufgenommen. Wenn Layer id bereitgestellt werden, müssen sie aus Schichten stammen, die dieselbe Quelle verwenden. Wenn nicht bereitgestellt oder ein falscher Wert angegeben ist, werden alle Schichten mit der ersten in der Glstyle angegebenen Quelle gerendert.

• OptionorPath? : string | Options & ApplyStyleOptions = {}

Veraltet . Optionen. Alternativ der Pfad der Stildatei (nur erforderlich, wenn ein relativer Pfad für die Eigenschaft "sprite" des Stils verwendet wird).

• Auflösungen? : number [] = undefined

Veraltet . Auflösungen für die Zuordnung der Auflösung zum Zoom -Level. Nur bei der Arbeit mit nicht standardmäßigen Fliesengittern oder -projektionen erforderlich, kann auch mit Optionen geliefert werden.

Zurück

Promise any

Versprechen, das gelöst wird, wenn der Stil zum Rendern verwendet werden kann.

OL-MAPBOX-Stil • Dokumente

Funktion: GetFeaturestate ()

GetFeaturestate ( mapOrLayer , feature ): any

Setzt oder entfernt einen Feature -Status. Der Feature -Status wird für das Styling berücksichtigt, genau wie die Eigenschaften der Feature, und kann zum Beispiel verwendet werden, um ausgewählte Merkmale unterschiedlich zu rendern.

Parameter

• MaporLayer : Map | VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

Karte oder Ebene, um den Feature -Status auf einzustellen.

• Funktion : FeatureIdentifier

Feature -Kennung.

Zurück

any

Feature -Status oder null , wenn für die angegebene Funktionsbezeichnung kein Merkmalszustand festgelegt ist.

OL-MAPBOX-Stil • Dokumente

Funktion: getLayer ()

getLayer ( map , layerId ): Layer < Source , LayerRenderer < any >>

Holen Sie sich die OpenLayers -Layer -Instanz, die die bereitgestellte Mapbox -Style layer enthält. Beachten Sie, dass Mehrschichten im Kartenbox -Stil in einer einzigen OpenLayers -Ebene -Instanz kombiniert werden, wenn sie dieselbe source des Mapbox -Stils verwenden.

Parameter

• Karte : Map | LayerGroup

OpenLayers Map oder LayerGroup.

• LayerID : string

Mapbox Style Layer ID.

Zurück

Layer < Source , LayerRenderer < any >>

OpenLayers Layer -Instanz.

OL-MAPBOX-Stil • Dokumente

Funktion: getLayers ()

getLayers ( map , sourceId ): Layer < Source , LayerRenderer < any >> []

Holen Sie sich die OpenLayers -Layer -Instanzen für die source zum bereitgestellten Mapbox -Stil.

Parameter

• Karte : Map | LayerGroup

OpenLayers Map oder LayerGroup.

• SourceId : string

Mapbox Style Source ID.

Zurück

Layer < Source , LayerRenderer < any >> []

OpenLayers Layer -Instanzen.

OL-MAPBOX-Stil • Dokumente

Funktion: getMapboxLayer ()

getMapboxLayer ( mapOrGroup , layerId ): any

Holen Sie sich das MapBox -Layer -Objekt für die bereitgestellte layerId .

Parameter

• MaporGroup : Map | LayerGroup

Karte oder Schichtgruppe.

• LayerID : string

Mapbox Layer ID.

Zurück

any

MAPBOX -Ebenenobjekt.

OL-MAPBOX-Stil • Dokumente

Funktion: getource ()

GetSource ( map , sourceId ): Source

Holen Sie sich die OpenLayers -Source -Instanz für die bereitgestellte source im MapBox -Stil.

Parameter

• Karte : Map | LayerGroup

OpenLayers Map oder LayerGroup.

• SourceId : string

Mapbox Style Source ID.

Zurück

Source

OpenLayers Source Instance.

OL-MAPBOX-Stil • Dokumente

Funktion: getStyleforlayer ()

getStyleforlayer ( feature , resolution , olLayer , layerId ): Style []

Holen Sie sich den Stil nur für eine bestimmte Mapbox -Ebene. Dies kann nützlich sein, um eine Legende zu erstellen.

Parameter

• Merkmal : RenderFeature | Feature Geometry

OpenLayers bietet.

• Auflösung : number

Auflösung anzeigen.

• Ollayer : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

OpenLayers -Schicht.

• LayerID : string

ID der Mapbox -Ebene, um den Stil für den Stil zu erhalten

Zurück

Style []

Stile für die bereitgestellte Mapbox -Ebene.

OL-MAPBOX-Stil • Dokumente

Funktion: RecordStylelayer ()

RecordStylelayer ( record ): void

Schaltet die Aufnahme der layer des Mapbox Style ein und aus. Beim Einschalten wird die Ebene, zu der eine gerenderte Funktion gehört, als mapbox-layer Eigenschaft der Feature festgelegt.

Parameter

• Aufzeichnung : boolean = false

Die Aufzeichnung der Stilebene ist eingeschaltet.

Zurück

void

OL-MAPBOX-Stil • Dokumente

Funktion: removemapboxLayer ()

removemapboxLayer ( mapOrGroup , mapboxLayerIdOrLayer ): void

Entfernen Sie ein Mapbox -Layer -Objekt aus dem Stil. Die Karte wird erneut gerendert.

Parameter

• MaporGroup : Map | LayerGroup

Die apply der Karte oder der Schichtgruppe wurde aufgerufen.

• MAPBOXLAYERIDORLAYER : any

MAPBOX Layer -ID oder MapBox -Ebenenobjekt.

Zurück

void

OL-MAPBOX-Stil • Dokumente

Funktion: RenderTransparent ()

renderTransparent ( enabled ): void

Konfigurieren Sie, ob Funktionen mit einem transparenten Stil gerendert werden sollen. Wenn Sie auf true gesetzt sind, können Sie in den nicht sichtbaren Erkenntnis von Inhalten erkennen, wie beispielsweise transparente Füllungen von Polygonen, unter Verwendung von ol/layer/Layer#getFeatures() oder ol/Map#getFeaturesAtPixel()

Parameter

• Aktiviert : boolean

Das Rendern transparenter Elemente ist aktiviert. Standard ist false .

Zurück

void

OL-MAPBOX-Stil • Dokumente

Funktion: setFeaturestate ()

SetFeaturestate ( mapOrLayer , feature , state ): void

Setzt oder entfernt einen Feature -Status. Der Feature -Status wird für das Styling berücksichtigt, genau wie die Eigenschaften der Feature, und kann zum Beispiel verwendet werden, um ausgewählte Merkmale unterschiedlich zu rendern.

Der Feature-Status wird in der OpenLayers-Ebene in der mapbox-featurestate -Eigenschaft gespeichert.

Parameter

• MaporLayer : Map | VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

OpenLayers Map oder Layer, um den Feature -Status auf einzustellen.

• Funktion : FeatureIdentifier

Feature -Kennung.

• Zustand : any

Feature -Status. Setzen Sie nach null um den Feature -Status zu entfernen.

Zurück

void

OL-MAPBOX-Stil • Dokumente

Funktion: stylefunction ()

Stylefunktion ( olLayer , glStyle , sourceOrLayers , resolutions , spriteData , spriteImageUrl , getFonts , getImage ?, ... args ?): StyleFunction

Erstellt eine Stilfunktion aus dem glStyle -Objekt für alle Ebenen, die die angegebene source verwenden, die ein "type": "vector" oder "type": "geojson" -Erigkeit und wendet sie auf die angegebene OpenLayers -Ebene an.

Zwei weitere Eigenschaften werden auf der bereitgestellten Ebene eingestellt:

mapbox-source : Die id des Dokuments des MapBox-Stils, aus der die OpenLayers-Ebene erstellt wurde. Normalerweise apply() erstellt eine OpenLayers -Ebene pro Quelle im Mapbox -Stil, es sei denn, der Ebenenstapel enthält Ebenen aus verschiedenen Quellen dazwischen.
mapbox-layers : Die id der Layers des Mapbox-Stils, die in der OpenLayers-Ebene enthalten sind.

Diese Funktion funktioniert auch in einem Webarbeiter. Im Worker -Modus muss der Haupt -Thread Nachrichten vom Arbeiter anhören und mit einer anderen Nachricht antworten, um sicherzustellen, dass das Laden von Sprite -Bild funktioniert:

 worker . addEventListener ( 'message' , event => {
  if ( event . data . action === 'loadImage' ) {
    const image = new Image ( ) ;
    image . crossOrigin = 'anonymous' ;
    image . addEventListener ( 'load' , function ( ) {
      createImageBitmap ( image , 0 , 0 , image . width , image . height ) . then ( imageBitmap => {
        worker . postMessage ( {
          action : 'imageLoaded' ,
          image : imageBitmap ,
          src : event . data . src
        } , [ imageBitmap ] ) ;
      } ) ;
    } ) ;
    image . src = event . data . src ;
  }
} ) ;

Parameter

• Ollayer : VectorLayer < VectorSource any , any > | VectorTileLayer < VectorTile any , any >

OpenLayers Layer, um den Stil auf anzuwenden. Zusätzlich zum Stil erhalten die Ebene zwei Eigenschaften: mapbox-source ist die id der für die Ebene verwendeten Quelle des glStyle , und mapbox-layers sind ein Array der id der glStyle -Ebenen.

• Glstyle : any

Mapbox Style -Objekt.

• SourceorLayers : string | string []

source oder ein Array von Ebenen id aus dem Mapbox -Stilobjekt. Wenn ein source bereitgestellt wird, werden alle Ebenen für die angegebene Quelle in die Stilfunktion aufgenommen. Wenn Layer id bereitgestellt werden, müssen sie aus Schichten stammen, die dieselbe Quelle verwenden.

• Auflösungen : number [] = defaultResolutions

Auflösungen für die Zuordnung der Auflösung zum Zoom -Level.

• Spritedata : any = undefined

Sprite -Daten aus der in der sprite -Eigenschaft des Mapbox -Objekts angegebenen URL. Nur erforderlich, wenn eine sprite -Eigenschaft im Mapbox -Objekt angegeben ist.

• SpriteImageurl : string | Request | Promise < string | Request > = undefined

Sprite -Bild -URL für die Sprite -Sprite in der sprite -Eigenschaft des Mapbox -Objekts. Nur erforderlich, wenn eine sprite -Eigenschaft im Mapbox -Objekt angegeben ist.

• GetFonts = undefined

Funktion, die einen Schriftstapel und die URL -Vorlage von den metadata['ol:webfonts'] als Argumente empfängt und einen (modifizierten) Schriftstapel zurückgibt, der verfügbar ist. Schriftbenamen sind die Namen, die im MapBox -Objekt verwendet werden. Wenn nicht zur Verfügung gestellt, wird der Schriftart Stapel als IS verwendet. Diese Funktion kann auch zum Laden von Webschriften verwendet werden.

• GetImage? = undefined

Funktion, die ein Bild oder eine URL für einen Bildnamen zurückgibt. Wenn das Ergebnis ein htmlimageElement ist, muss es bereits geladen werden. Die Ebene kann verwendet werden, um die Schicht aufzurufen. Diese Funktion kann für Symbole verwendet werden, die nicht im Sprite oder zum Überschreiben von Sprite -Symbolen.

• ... Args? : any