Delen via


Een titellaag toevoegen aan een kaart

In dit artikel leest u hoe u een tegellaag op de kaart overlayt. Met tegellagen kunt u afbeeldingen boven op Azure Kaarten basiskaarttegels plaatsen. Zie Zoomniveaus en tegelraster voor meer informatie over het tegelsysteem van Azure Kaarten.

Een tegellaag wordt geladen in tegels vanaf een server. Deze afbeeldingen kunnen vooraf worden gerenderd of dynamisch worden weergegeven. Vooraf geplaatste installatiekopieën worden opgeslagen zoals elke andere afbeelding op een server met behulp van een naamconventie die de tegellaag begrijpt. Dynamisch gerenderde afbeeldingen maken gebruik van een service om de afbeeldingen dicht bij realtime te laden. Er zijn drie verschillende naamconventies voor de tegelservice die worden ondersteund door azure Kaarten TileLayer-klasse:

  • X, Y, Zoom notatie - X is de kolom, Y is de rijpositie van de tegel in het tegelraster en de zoom notatie een waarde op basis van het zoomniveau.
  • Quadkey-notatie : combineert x, y en zoominformatie in één tekenreekswaarde. Deze tekenreekswaarde wordt een unieke id voor één tegel.
  • Begrenzingsvak- Geef een afbeelding op in de indeling van het begrenzingsvak: {west},{south},{east},{north}. Deze indeling wordt vaak gebruikt door webtoewijzingsservices (WMS).

Tip

Een TileLayer is een uitstekende manier om grote gegevenssets op de kaart te visualiseren. Er kan niet alleen een tegellaag worden gegenereerd op basis van een afbeelding, maar vectorgegevens kunnen ook worden weergegeven als tegellaag. Door vectorgegevens als tegellaag te renderen, hoeft kaartbeheer alleen de tegels te laden die kleiner zijn in bestandsgrootte dan de vectorgegevens die ze vertegenwoordigen. Deze techniek wordt vaak gebruikt om miljoenen rijen met gegevens op de kaart weer te geven.

De tegel-URL die is doorgegeven aan een tegellaag, moet een HTTP- of https-URL zijn naar een TileJSON-resource of een tegel-URL-sjabloon die gebruikmaakt van de volgende parameters:

  • {x} - X-positie van de tegel. Ook behoeften {y} en {z}.
  • {y} - Y-positie van de tegel. Ook behoeften {x} en {z}.
  • {z} - Zoomniveau van de tegel. Ook behoeften {x} en {y}.
  • {quadkey}- Tegel quadkey-id op basis van de naamconventie van bing Kaarten tegelsysteem.
  • {bbox-epsg-3857} - Een begrenzingsvaktekenreeks met de notatie {west},{south},{east},{north} in het EPSG 3857 Spatial Reference System.
  • {subdomain} - Een tijdelijke aanduiding voor de subdomeinwaarden, als deze is opgegeven, subdomain wordt toegevoegd.
  • {azMapsDomain} - Een tijdelijke aanduiding om het domein en de verificatie van tegelaanvragen uit te lijnen met dezelfde waarden die door de kaart worden gebruikt.

Een titellaag toevoegen

In dit voorbeeld ziet u hoe u een tegellaag maakt die verwijst naar een set tegels. In dit voorbeeld wordt het systeem x, y, zoom tiling gebruikt. De bron van deze tegellaag is het OpenSeaMap-project, dat crowd sourced nautische grafieken bevat. In het ideale gevallen zien gebruikers duidelijk de labels van steden wanneer ze op de kaart navigeren bij het weergeven van radargegevens. Dit gedrag kan worden geïmplementeerd door de tegellaag onder de laag in te labels voegen.

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256,
    minSourceZoom: 7,
    maxSourceZoom: 17
}), 'labels');

Voor een volledig functioneel voorbeeld waarin wordt getoond hoe u een tegellaag maakt die verwijst naar een set tegels met behulp van het x-, y-, zoom-tegelsysteem, raadpleegt u de tegellaag met behulp van X, Y en Z in de Voorbeelden van Azure Kaarten. De bron van de tegellaag in dit voorbeeld is een nautisch diagram van het OpenSeaMap-project, een OpenStreet Kaarten project dat is gelicentieerd onder ODbL. Zie Tile Layer met behulp van X-, Y- en Z-broncode voor de broncode voor de broncode voor dit voorbeeld.

A screenshot of map with a tile layer that points to a set of tiles using the x, y, zoom tiling system. The source of this tile layer is the OpenSeaMap project.

Een OGC-webtoewijzingsservice (WMS) toevoegen

Een webtoewijzingsservice (WMTS) is een OGC-standaard (Open Geospatial Consortium) voor het leveren van afbeeldingen van kaartgegevens. Er zijn veel open gegevenssets beschikbaar in deze indeling die u kunt gebruiken met Azure Kaarten. Dit type service kan worden gebruikt met een tegellaag als de service het EPSG:3857 coördinaatreferentiesysteem (CRS) ondersteunt. Wanneer u een WMS-service gebruikt, stelt u de breedte- en hoogteparameters in op de waarde die door de service wordt ondersteund. Zorg ervoor dat u deze waarde instelt in de tileSize optie. Stel in de opgemaakte URL de BBOX parameter van de service in met de {bbox-epsg-3857} tijdelijke aanduiding.

Zie het voorbeeld van de WMS-tegellaag in de Voorbeelden van Azure Kaarten voor een volledig functioneel voorbeeld waarin wordt getoond hoe u een tegellaag maakt die verwijst naar een webtoewijzingsservice (WMS). Zie de broncode van WMS Tile Layer voor de broncode voor dit voorbeeld.

In de volgende schermopname ziet u het WMS Tile Layer-voorbeeld dat een webtoewijzingsservice overzet van geologisch gegevens uit de Amerikaanse Geologisch Onderzoek (USGS) boven op de kaart en onder de labels.

A screenshot of a world map with a tile layer that points to a Web Mapping Service (WMS).

Een OGC-webtoewijzingstegelservice (WMTS) toevoegen

Een webtoewijzingtegelservice (WMTS) is een OGC-standaard (Open Geospatial Consortium) voor het leveren van betegelde overlays voor kaarten. Er zijn veel open gegevenssets beschikbaar in deze indeling die u kunt gebruiken met Azure Kaarten. Dit type service kan worden gebruikt met een tegellaag als de service het EPSG:3857 CRS (Reference System) ondersteunt of GoogleMapsCompatible coördineert. Wanneer u een WMTS-service gebruikt, stelt u de breedte- en hoogteparameters in op dezelfde waarde die door de service wordt ondersteund. Zorg ervoor dat u deze waarde ook instelt in de tileSize optie. Vervang in de opgemaakte URL de volgende tijdelijke aanduidingen dienovereenkomstig:

  • {TileMatrix} =>{z}
  • {TileRow} =>{y}
  • {TileCol} =>{x}

Voor een volledig functioneel voorbeeld waarin wordt getoond hoe u een tegellaag maakt die verwijst naar een webtoewijzingstegelservice (WMTS), raadpleegt u het WMTS Tile Layer-voorbeeld in de Azure Kaarten-voorbeelden. Zie de broncode van WMTS Tile Layer voor de broncode voor dit voorbeeld.

In de volgende schermopname ziet u het WMTS Tile Layer-voorbeeld met een webtoewijzingstegelservice van afbeeldingen uit de Amerikaanse geologisch onderzoek (USGS) National Map boven op een kaart, onder wegen en labels.

A screenshot of a map with a tile layer that points to a Web Mapping Tile Service (WMTS) overlay.

Een tegellaag aanpassen

De klasse tegellaag heeft veel stijlopties. Het voorbeeld opties voor tegellagen is een hulpprogramma om ze uit te proberen. Zie de broncode van tegellaagopties voor de broncode voor dit voorbeeld.

A screenshot of Tile Layer Options sample.

Volgende stappen

Meer informatie over de klassen en methoden die in dit artikel worden gebruikt:

Zie de volgende artikelen voor meer codevoorbeelden die u aan uw kaarten kunt toevoegen: