Dodawanie warstwy kafelków do mapy

W tym artykule pokazano, jak nakładać warstwę kafelka na mapie. Warstwy kafelków umożliwiają zastępowanie obrazów na kafelkach mapy podstawowej platformy Azure Mapy. Aby uzyskać więcej informacji na temat systemu tiling platformy Azure Mapy, zobacz Poziomy powiększenia i siatka kafelków.

Warstwa kafelka ładuje się kafelkami z serwera. Te obrazy mogą być wstępnie renderowane lub renderowane dynamicznie. Obrazy wstępnie rozsyłane są przechowywane jak każdy inny obraz na serwerze przy użyciu konwencji nazewnictwa, którą rozumie warstwa kafelka. Dynamiczne renderowanie obrazów używa usługi do ładowania obrazów blisko czasu rzeczywistego. Istnieją trzy różne konwencje nazewnictwa usług kafelków obsługiwane przez klasę TileLayer platformy Azure Mapy:

  • X, Y, Notacja powiększenia — X to kolumna, Y jest pozycją wiersza kafelka w siatce kafelków, a notacja Zoom jest wartością opartą na poziomie powiększenia.
  • Notacja quadkey — łączy wartości x, y i powiększania w jedną wartość ciągu. Ta wartość ciągu staje się unikatowym identyfikatorem pojedynczego kafelka.
  • Pole ograniczenia — określ obraz w formacie współrzędnych pola ograniczenia: {west},{south},{east},{north}. Ten format jest często używany przez usługi mapowania sieci Web (WMS).

Napiwek

Element TileLayer to doskonały sposób wizualizacji dużych zestawów danych na mapie. Nie tylko warstwę kafelka można wygenerować na podstawie obrazu, ale także dane wektorowe mogą być renderowane jako warstwa kafelka. Dzięki renderowaniu danych wektorów jako warstwy kafelków kontrolka mapy musi ładować kafelki o mniejszym rozmiarze niż dane wektorowe, które reprezentują. Ta technika jest często używana do renderowania milionów wierszy danych na mapie.

Adres URL kafelka przekazany do warstwy kafelek musi być adresem HTTP lub https do zasobu TileJSON lub szablonem adresu URL kafelka, który używa następujących parametrów:

  • {x} - X położenie kafelka. Ponadto wymaga {y} i {z}.
  • {y} - Y położenie kafelka. Ponadto wymaga {x} i {z}.
  • {z} - Poziom powiększenia kafelka. Ponadto wymaga {x} i {y}.
  • {quadkey}- Identyfikator czworokąta kafelka na podstawie konwencji nazewnictwa systemu kafelków Bing Mapy.
  • {bbox-epsg-3857} - Ciąg pola ograniczenia z formatem {west},{south},{east},{north} w systemie odniesienia przestrzennego EPSG 3857.
  • {subdomain} — Symbol zastępczy dla wartości poddomeny, jeśli zostanie określony subdomain , zostanie dodany.
  • {azMapsDomain} — Symbol zastępczy służący do wyrównania domeny i uwierzytelniania żądań kafelków z tymi samymi wartościami używanymi przez mapę.

Dodawanie warstwy kafelków

W tym przykładzie pokazano, jak utworzyć warstwę kafelka wskazującą zestaw kafelków. W tym przykładzie używany jest system tilingów x, y i zoom. Źródłem tej warstwy kafelka jest projekt OpenSeaMap, który zawiera wykresy morskie ze źródłami tłumu. W idealnym przypadku użytkownicy będą wyraźnie widzieć etykiety miast podczas przeglądania mapy podczas wyświetlania danych radarowych. To zachowanie można zaimplementować przez wstawienie warstwy kafelka poniżej warstwy labels .

//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');

Aby zapoznać się z w pełni funkcjonalnym przykładem tworzenia warstwy kafelków, która wskazuje zestaw kafelków przy użyciu systemu x, y, powiększenia, zobacz przykład Warstwa kafelka przy użyciu języka X, Y i Z w przykładach usługi Azure Mapy Samples. Źródłem warstwy kafelka w tym przykładzie jest wykres morski z projektu OpenSeaMap, projektu OpenStreet Mapy licencjonowanego w ramach ODbL. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Temat Tile Layer using X, Y i Z source code (Warstwa kafelka przy użyciu kodu źródłowego X, Y i Z).

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.

Dodawanie usługi mapowania sieci Web OGC (WMS)

Usługa mapowania sieci Web (WMTS) to standard Open Geospatial Consortium (OGC) służący do obsługi obrazów danych mapy. Istnieje wiele otwartych zestawów danych dostępnych w tym formacie, których można używać z usługą Azure Mapy. Tego typu usługi można używać z warstwą kafelka, jeśli usługa obsługuje EPSG:3857 system odwołania współrzędnych (CRS). W przypadku korzystania z usługi WMS ustaw parametry szerokości i wysokości na wartość obsługiwaną przez usługę, pamiętaj, aby ustawić tę wartość w tileSize opcji . W sformatowany adres URL ustaw BBOX parametr usługi za pomocą symbolu zastępczego {bbox-epsg-3857} .

Aby zapoznać się z w pełni funkcjonalnym przykładem przedstawiającym sposób tworzenia warstwy kafelka, która wskazuje usługę mapowania sieci Web (WMS), zobacz przykład warstwy kafelka WMS w przykładach usługi Azure Mapy. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Kod źródłowy warstwy kafelka WMS.

Poniższy zrzut ekranu przedstawia przykład warstwy kafelków WMS, który nakłada usługę internetowego mapowania danych geologicznych z US Geological Survey (USGS) na mapie i pod etykietami.

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

Dodawanie usługi kafelka mapowania sieci Web OGC (WMTS)

Usługa kafelków mapowania sieci Web (WMTS) to standard Open Geospatial Consortium (OGC) obsługujący nakładki oparte na kafelkach dla map. Istnieje wiele otwartych zestawów danych dostępnych w tym formacie, których można używać z usługą Azure Mapy. Tego typu usługi można używać z warstwą kafelka, jeśli usługa obsługuje EPSG:3857 system odniesienia lub GoogleMapsCompatible współrzędnych (CRS). W przypadku korzystania z usługi WMTS ustaw parametry szerokości i wysokości na tę samą wartość obsługiwaną przez usługę, należy również ustawić tę wartość w tileSize opcji . W sformatowany adres URL zastąp następujące symbole zastępcze odpowiednio:

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

Aby zapoznać się z w pełni funkcjonalnym przykładem tworzenia warstwy kafelka wskazującej usługę kafelek mapowania sieci Web (WMTS), zobacz przykład warstwy kafelków usługi WMTS w przykładzie azure Mapy Samples(Przykłady). Aby uzyskać kod źródłowy dla tego przykładu, zobacz Kod źródłowy warstwy kafelka usługi WMTS.

Poniższy zrzut ekranu przedstawia przykład warstwy kafelków usługi WMTS przesłaniania usługi kafelka mapowania internetowego obrazów z mapy narodowej USGS (USGS) National Survey (USGS) na mapie poniżej dróg i etykiet.

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

Dostosowywanie warstwy kafelka

Klasa warstwy kafelków ma wiele opcji stylów. Przykład Opcji warstwy kafelka to narzędzie do wypróbowania ich. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Kafelek Opcje warstwy kodu źródłowego.

A screenshot of Tile Layer Options sample.

Następne kroki

Dowiedz się więcej o klasach i metodach używanych w tym artykule:

Więcej przykładów kodu do dodania do map można znaleźć w następujących artykułach: