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 przy określonym poziomie powiększenia. Mając wystarczającą liczbę fragmentów, możesz uzupełnić dane Google całej mapy w różnych poziomach powiększenia.

Wstęp

Warstwy kafelków (nazywane też warstwami kafelków) umożliwiają nakładanie obrazów na podstawowe fragmenty mapy Google. To świetny sposób na dodawanie do aplikacji danych, np. ciekawych miejsc lub informacji o natężeniu ruchu, oraz zdjęć lokalnych. W połączeniu z mapą typu kGMSTypeNone warstwy kafelków pozwalają skutecznie zastąpić dane mapy podstawowej Google własnymi.

Warstwy kafelków przydają się, gdy chcesz dodać do mapy obszerne zdjęcia, zwykle obejmujące duże obszary geograficzne. Z kolei nakładki na powierzchni są przydatne, gdy chcesz poprawić pojedynczy obraz w jednym punkcie mapy.

Współrzędne kafelka

Interfejs API Map Google dzieli zdjęcia na każdym poziomie powiększenia na zestaw kwadratowych kafelków mapy, które są rozmieszczone w uporządkowany sposób. Gdy mapa przewija się do nowej lokalizacji lub do nowego poziomu powiększenia, interfejs Maps API określa, które kafelki są potrzebne, i przekłada je na zestaw kafelków do pobrania.

W przypadku implementacji odwzorowania Merkatora przez Google kafelek ze współrzędną (0, 0) znajduje się zawsze w północno-zachodnim rogu mapy,przy czym wartości x zwiększają się z zachodu na wschód, a wartości y rosną 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że się odnieść unikalna para x,y:

Mapa świata podzielona na 4 wiersze i 4 kolumny z kafelkami.

Każdy kafelek mapy to kwadrat o wymiarach 256 x 256 punktów. Przy powiększeniu 0 cały świat jest wyświetlany na jednym kafelku. Każdy poziom powiększenia 2-krotnie zwiększa powiększenie. W przypadku powiększenia 1 mapa będzie więc wyświetlana jako siatka 2 x 2 kafelków, siatka 4 x 4 przy powiększeniu 2, siatka 8 x 8 przy powiększeniu 3 itd. Jeśli tworzysz obrazy na warstwę kafelków, musisz utworzyć nowy obraz 256 x 256 punktów dla każdego kafelka z każdym obsługiwanym poziomem powiększenia.

Dodawanie warstwy kafelka

  1. Utwórz instancję obiektu GMSURLTileLayer lub niestandardową podklasę GMSTileLayer/GMSSyncTileLayer.
  2. Opcjonalnie zmień właściwość zIndex, aby dostosować jej pozycję względem innych warstw kart.
  3. Przypisz obiekt GMSTileLayer do mapy, ustawiając jego właściwość map.

Maps SDK na iOS udostępnia 3 klasy, których można użyć do wdrożenia warstwy kafelków. W przypadku poszczególnych zajęć musisz określić, jak pobierać prawidłowy kafelek mapy dla danego zestawu współrzędnych {x,y,zoom}. Dostępne opcje:

  • Podklasa GMSSyncTileLayer udostępniająca implementację klasy tileForX:y:zoom, która zwraca UIImage instancje.
  • Podklasa GMSTileLayer zapewniająca implementację metody asynchronicznej requestTileForX:y:zoom, która później wywołuje metodę z obrazem kafelka.
  • Użyj istniejącej klasy (GMSURLTileLayer), aby automatycznie pobierać kafelki z adresów URL, udostępniając blok GMSTileURLConstructor. GMSURLTileLayer to konkretna klasa, której nie można podklasyfikować.

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

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

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

GMSURLTileLayer nie wymaga podziału na podklasy, ale musisz wdrożyć blok GMSTileURLConstructor. Poniższy kod pokazuje, jak za pomocą pola GMSURLTileLayer wyświetlić plan piętra w budynku wielopiętrowym.

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 wyświetla kafelki jako UIImage

GMSSyncTileLayer i GMSTileLayer to klasy abstrakcyjne, które mają być podklasyfikowane. Możesz użyć tych klas do wyświetlania kafelków jako elementów UIImage. Poniższy przykład pokazuje, jak wyrenderować obraz niestandardowy na niektórych kafelkach na mapie przy użyciu podklasy 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 High DPI na urządzenia Retina

Możesz używać obrazów o wysokiej rozdzielczości DPI z parametrami GMSSyncTileLayer i GMSURLTileLayer, ustawiając parametr tileSize na 512. Właściwość tileSize wskazuje liczbę pikseli, w jakiej będą wyświetlane zwrócone obrazy kafelków. Domyślnie to 256, czyli wymiar kafelka Map Google na urządzeniu innym niż Retina.

Jeśli wyświetlasz normalne kafelki DPI na urządzeniu o wysokiej rozdzielczości DPI, możesz skalować obrazy w górę, ustawiając tileSize na 512. Pamiętaj, że skalowanie obrazów może obniżyć ich jakość, zwłaszcza w przypadku drobnych linii lub tekstu. Aby uzyskać najlepsze wyniki, dopasuj do wyświetlacza wartości tileSize i DPI obrazu. Mapy wyświetlane na urządzeniach Retina prezentują się najlepiej przy wyświetlaniu obrazów w wysokiej rozdzielczości DPI przy współczynniku tileSize o wartości 512 pikseli. Natomiast mapy wyświetlane na urządzeniach innych niż Retina będą wyglądać lepiej ze zwykłymi obrazami i z domyślnym ustawieniem tileSize o wartości 256.

Czyszczenie nieaktualnych kafelków

Jeśli kafelki udostępnione przez warstwę staną się „nieaktualne”, należy wywołać z nich metodę clearTileCache, by wymusić odświeżenie. Spowoduje to ponowne załadowanie wszystkich kafelków w tej warstwie.

Swift

layer.clearTileCache()

Objective-C

[layer clearTileCache];