Warstwy kafelków

Wybierz platformę: Android iOS JavaScript

Możesz dodawać obrazy na mapie jako warstwę kafelków. Warstwy kafelków są umieszczane na kafelku mapy na określonym poziomie powiększenia. Przy wystarczającej liczbie kafelków możesz uzupełnić dane map Google dla całej mapy na wielu poziomach powiększenia.

Wprowadzenie

Warstwy kafelków, czasami nazywane nakładkami z kafelkami, umożliwiają nakładanie obrazów na kafelki mapy podstawowej Google. Użyj tej funkcji, aby dodać do aplikacji dane, takie jak ciekawe miejsca lub informacje o natężeniu ruchu, oraz lokalne zdjęcia. W połączeniu z typem mapy kGMSTypeNone warstwy kafelków umożliwiają skuteczne zastąpienie danych mapy podstawowej Google własnymi danymi.

Warstwy kafelków są przydatne, gdy chcesz dodać do mapy rozległe zdjęcia, które zwykle obejmują duże obszary geograficzne. Z kolei nakładki na grunt są przydatne, gdy chcesz umieścić pojedynczy obraz w jednym punkcie na mapie.

Współrzędne mapy

Interfejs API Map Google dzieli zdjęcia na każdym poziomie powiększenia na zestaw kwadratowych kafelków mapy, które są ułożone w uporządkowaną siatkę. Gdy mapa zostanie przewinięta do nowej lokalizacji lub nowego poziomu powiększenia, interfejs API Map Google określa, które kafelki są potrzebne, i przekłada to na zestaw kafelków do pobrania.

W implementacji rzutu Merkatora przez Google kafelek o współrzędnych (0, 0) zawsze znajduje się w północno-zachodnim rogu mapy,przy czym wartości x rosną z zachodu na wschód, a wartości y – z północy na południe. Kafelki są indeksowane za pomocą współrzędnych x,y z tego punktu początkowego. Na przykład na poziomie powiększenia 2, gdy Ziemia jest podzielona na 16 kafelków, do każdego kafelka można się odwołać za pomocą unikalnej pary x,y:

Mapa świata podzielona na 4 wiersze i 4 kolumny kafelków.

Każdy kafelek mapy to kwadrat o wymiarach 256 x 256 punktów. Na poziomie powiększenia 0 cały świat jest renderowany na jednym kafelku. Każdy poziom powiększenia zwiększa powiększenie dwukrotnie. Na przykład na poziomie powiększenia 1 mapa jest renderowana jako siatka kafelków 2 x 2, na poziomie powiększenia 2 jako siatka 4 x 4, a na poziomie powiększenia 3 jako siatka 8 x 8. Aby utworzyć obrazy dla warstwy kafelków, utwórz obraz o wymiarach 256 x 256 punktów dla każdego kafelka na każdym poziomie powiększenia, który chcesz obsługiwać.

Dodawanie warstwy kafelków

  1. Utwórz instancję obiektu GMSURLTileLayer lub niestandardowej podklasy GMSTileLayer albo GMSSyncTileLayer.
  2. Opcjonalnie zmodyfikuj właściwość zIndex, aby dostosować jej pozycję względem innych warstw kafelków.
  3. Przypisz obiekt GMSTileLayer do mapy, ustawiając jego właściwość map.

Pakiet Maps SDK na iOS udostępnia 3 klasy, których można używać do implementowania warstwy kafelków. W każdej klasie musisz określić, jak pobierać odpowiedni kafelek mapy dla danego zestawu współrzędnych {x,y,zoom}. Dostępne są te opcje:

  • Utwórz podklasę GMSSyncTileLayer, podając implementację metody tileForX:y:zoom, która zwraca instancje UIImage.
  • Utwórz podklasę GMSTileLayer, która zapewnia implementację metody asynchronicznej requestTileForX:y:zoom, która później wywołuje obraz kafelka.
  • Użyj istniejącej klasy GMSURLTileLayer, aby automatycznie pobierać kafelki z adresów URL, podając blok GMSTileURLConstructor. GMSURLTileLayer to klasa konkretna, która nie może mieć podklas.

W przypadku podklasy GMSSyncTileLayer lub GMSTileLayer podanie wyniku kafelka nil poinformuje pakiet Maps SDK na iOS, że dane są niedostępne, ale mogą być dostępne w przyszłości. Możesz też zwrócić kGMSTileLayerNoTile, aby wskazać, że w tej lokalizacji nie ma kafelka.

W przypadku GMSURLTileLayer zwrócenie nil z GMSTileURLConstructor będzie oznaczać, że w tej lokalizacji nie ma kafelka.

Używanie GMSURLTileLayer do pobierania kafelków z adresów URL

Klasa GMSURLTileLayer nie wymaga tworzenia podklas, ale musisz zaimplementować blok GMSTileURLConstructor. Poniższy kod pokazuje, jak używać GMSURLTileLayer do wyświetlania planu piętra wielopiętrowego budynku.

Swift

let floor = 1

// Implement GMSTileURLConstructor
// Returns a Tile based on the x,y,zoom coordinates, and the requested floor
let urls: GMSTileURLConstructor = { (x, y, zoom) in
  let url = "https://www.example.com/floorplans/L\(floor)_\(zoom)_\(x)_\(y).png"
  return URL(string: url)
}

// Create the GMSTileLayer
let layer = GMSURLTileLayer(urlConstructor: urls)

// Display on the map at a specific zIndex
layer.zIndex = 100
layer.map = mapView

Objective-C

NSInteger floor = 1;

// Create the GMSTileLayer
GMSURLTileLayer *layer = [GMSURLTileLayer tileLayerWithURLConstructor:^NSURL * _Nullable(NSUInteger x, NSUInteger y, NSUInteger zoom) {
  NSString *url = [NSString stringWithFormat:@"https://www.example.com/floorplans/L%ld_%lu_%lu_%lu.png",
                   (long)floor, (unsigned long)zoom, (unsigned long)x, (unsigned long)y];
  return [NSURL URLWithString:url];
}];

// Display on the map at a specific zIndex
layer.zIndex = 100;
layer.map = mapView;

Podklasa GMSSyncTileLayer do wyświetlania kafelków jako UIImage

Klasy GMSSyncTileLayer i GMSTileLayer są klasami abstrakcyjnymi, które mają być podklasami. Możesz używać tych klas do wyświetlania kafelków jako UIImage. Przykład poniżej pokazuje, jak wyrenderować niestandardowy obraz na niektórych kafelkach na mapie, tworząc podklasę GMSSyncTileLayer.

Swift

class TestTileLayer: GMSSyncTileLayer {
  override func tileFor(x: UInt, y: UInt, zoom: UInt) -> UIImage? {
    // On every odd tile, render an image.
    if (x % 2 == 1) {
      return UIImage(named: "australia")
    } else {
      return kGMSTileLayerNoTile
    }
  }
}

Objective-C

@interface TestTileLayer : GMSSyncTileLayer
@end

@implementation TestTileLayer

- (UIImage *)tileForX:(NSUInteger)x y:(NSUInteger)y zoom:(NSUInteger)zoom {
  // On every odd tile, render an image.
  if (x % 2 == 1) {
    return [UIImage imageNamed:@"australia"];
  } else {
    return kGMSTileLayerNoTile;
  }
}

@end

Aby dodać warstwę do mapy, utwórz instancję obiektu i ustaw jego właściwość mapy.

Swift

let layer = TestTileLayer()
layer.map = mapView

Objective-C

GMSTileLayer *layer = [[TestTileLayer alloc] init];
layer.map = mapView;

Kafelki o wysokiej rozdzielczości na urządzenia Retina

Możesz używać obrazów o wysokiej rozdzielczości z GMSSyncTileLayer lub GMSURLTileLayer, ustawiając tileSize na 512. Właściwość tileSize wskazuje liczbę pikseli, w których preferowane jest wyświetlanie zwróconych obrazów kafelków. Domyślnie jest to 256 – wymiar kafelka Map Google na urządzeniu bez wyświetlacza Retina.

Jeśli wyświetlasz kafelki o normalnej rozdzielczości na urządzeniu o wysokiej rozdzielczości, możesz przeskalować obrazy, ustawiając wartość tileSize na 512. Pamiętaj, że zwiększanie rozdzielczości obrazów może obniżyć jakość obrazu, zwłaszcza w przypadku cienkich linii lub tekstu. Aby uzyskać najlepsze wyniki, dopasuj tileSize i rozdzielczość obrazu do wyświetlacza. Mapy wyświetlane na urządzeniu z ekranem Retina będą wyglądać najlepiej, gdy będą wyświetlać obrazy o wysokiej rozdzielczości z parametrem tileSize o wartości 512. Mapy wyświetlane na urządzeniu bez ekranu Retina będą wyglądać świetnie z normalnymi obrazami i domyślnym parametrem tileSize o wartości 256.

Czyszczenie nieaktualnych kafelków

Jeśli kafelki dostarczone przez warstwę staną się „nieaktualne”, należy wywołać metodę clearTileCache na warstwie, aby wymusić odświeżenie. Spowoduje to ponowne wczytanie wszystkich kafelków w tej warstwie.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];