Typy map

Wybierz platformę: Android iOS JavaScript

W tym dokumencie omówiono typy map, które można wyświetlać za pomocą Maps JavaScript API. Interfejs API wykorzystuje MapType do przechowywania informacji o tych mapach. MapType to interfejs, który definiuje sposób wyświetlania i używania fragmentów mapy tłumaczenie układów współrzędnych ze współrzędnych na ekranie na świat współrzędnych (na mapie). Każdy element MapType musi zawierać parametr kilka metod pobierania i zwalniania kafelków, a także właściwości, które definiują jej wygląd.

Wewnętrzne działanie typów map w interfejsie Maps JavaScript API to zaawansowany temat. Większość programistów używa podstawowych typów map wymienionych poniżej. Można też zmienić sposób prezentacji istniejące typy map za pomocą stylizowanych map; lub definiować własne fragmenty map za pomocą niestandardowych typów map. Podczas tworzenia niestandardowych typów map musisz zrozumieć, jak modyfikować Map Type Registry (Rejestr typów map).

Podstawowe typy map

W Maps JavaScript API dostępne są 4 typy map. Oprócz znanego Ci „malowanego” fragmenty mapy, Maps JavaScript API obsługuje też inne typy map.

W Maps JavaScript API dostępne są te typy map:

  • roadmap wyświetla domyślny widok mapy drogowej. Ten to domyślny typ mapy.
  • satellite wyświetla satelitę Google Earth obrazów.
  • hybrid wyświetla zarówno obraz normalny, jak i satelitarny wyświetleń.
  • terrain wyświetla fizyczną mapę opartą na ukształtowaniu terenu i informacjami o nich.

Możesz zmienić typ mapy używany przez Map, ustawiając jego właściwość mapTypeId w konstruktorze za pomocą ustawienia jej obiekt Map options lub przez wywołanie funkcji setMapTypeId(). Właściwość mapTypeID domyślna wartość to roadmap.

Ustawiam mapTypeId podczas budowy:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

Dynamiczna zmiana parametru mapTypeId:

map.setMapTypeId('terrain');

Pamiętaj, że nie ustawiasz bezpośrednio typu mapy, ale zamiast tego ustaw jego mapTypeId tak, aby odwoływał się do MapType za pomocą identyfikatora. Maps JavaScript API korzysta z rejestru typów map, które omówimy poniżej, aby zarządzać tymi plikami.

Zdjęcia pod kątem 45°

Interfejs Maps JavaScript API obsługuje specjalne zdjęcia pod kątem określonych lokalizacjach. Te zdjęcia o wysokiej rozdzielczości zapewniają widoków z każdej perspektywy (Północ, południe, wschód, zachód). Te obrazy są dostępne na wyższym poziomie poziomów powiększenia dla obsługiwanych typów map.

Poniższa ilustracja przedstawia widok z perspektywy Nowego Jorku pod kątem 45°:

Typy map satellite i hybrid obsługują tylko 45° zdjęć robionych przy dużym powiększeniu (12 i większe), jeśli tylko są dostępne. Jeśli użytkownik powiększa widok lokalizacji, na której istnieją takie zdjęcia. Ten typ mapy automatycznie zmieniać swoje widoki w następujący sposób:

  • Zdjęcia satelitarne lub hybrydowe są zastępowane zdjęciami z widokiem 45° z widokiem na bieżącą lokalizację. Domyślnie takie widoki są w kierunku północnym. Jeśli użytkownik pomniejszy mapę, domyślny widok satelitarny lub zdjęcia hybrydowe. Działanie różni się w zależności od poziomu powiększenia. oraz wartość tilt:
    • Pomiędzy poziomem powiększenia 12–18 mapa podstawowa (0°) wyświetla się od góry do dołu domyślnie, chyba że tilt ma wartość 45.
    • Przy powiększeniu 18 lub większym mapa bazowa jest wyświetlana pod kątem 45°, chyba że tilt ma wartość 0.
  • Pojawi się element sterujący obrotem. Sterowanie obrotem udostępnia opcje które umożliwiają użytkownikowi przełączanie przechylenia i obracanie widoku pod kątem 90° w dowolnym kierunku. Aby ukryć element sterujący obrotem, ustaw wartość rotateControl do false.

Pomniejszanie z poziomu mapy wyświetlanej pod kątem prostym z każdą z tych zmian, przywracając pierwotny typ map.

Włączanie i wyłączanie zdjęć 45°

Możesz wyłączyć zdjęcia 45°, wywołując funkcję setTilt(0) na Map obiekt. Aby włączyć zdjęcia 45° na obsługiwanych typach map: Zadzwoń pod numer setTilt(45). Map: getTilt() będzie zawsze odzwierciedlała bieżącą metodę tilt wyświetlaną na mapa; ustaw tilt na mapie, a następnie usuniesz tilt (np. pomniejszenie mapy), Metoda getTilt() zwróci wartość 0.

Ważne: zdjęcia 45° są obsługiwane tylko w mapy rastrowe; zdjęć nie można używać z mapami wektorowymi.

Poniższy przykład przedstawia widok Nowego Jorku pod kątem 45°:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40.76, lng: -73.983 },
      zoom: 15,
      mapTypeId: "satellite",
    }
  );

  map.setTilt(45);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
  });

  map.setTilt(45);
}

window.initMap = initMap;
index.js
Zobacz przykład

Zobacz próbkę

Zobacz przykład.

Obracanie zdjęć pod kątem 45°

Zdjęcia pod kątem 45° w rzeczywistości składają się z kolekcji zdjęć dla każdego kierunku kardynała (północ, południe, wschód, zachód). Gdy już umieścisz mapę wyświetlany jest obraz pod kątem 45°, możesz orientować się w kierunku jednego z jej kierunków, wykorzystując funkcję setHeading() na obiekcie Map, przekazano wartość liczbową wyrażoną w postaci stopni od północy.

Przykład poniżej przedstawia mapę powietrzną i autoobracanie mapy co 3 sekundy po kliknięciu przycisku:

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });

  // add listener to button
  document.getElementById("rotate")!.addEventListener("click", autoRotate);
}

function rotate90(): void {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate(): void {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -73.983 },
    zoom: 15,
    mapTypeId: "satellite",
    heading: 90,
    tilt: 45,
  });
  // add listener to button
  document.getElementById("rotate").addEventListener("click", autoRotate);
}

function rotate90() {
  const heading = map.getHeading() || 0;

  map.setHeading(heading + 90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery.
  if (map.getTilt() !== 0) {
    window.setInterval(rotate90, 3000);
  }
}

window.initMap = initMap;
index.js
Zobacz przykład

Zobacz próbkę

Zobacz przykład.

Modyfikowanie rejestru typów map

Element mapTypeId mapy jest identyfikatorem w postaci ciągu znaków służąca do powiązania elementu MapType z unikalną wartość. Każdy obiekt Map przechowuje MapTypeRegistry, który zawiera kolekcję dostępnych MapType dla tej mapy. Ten rejestr służy do wyboru typów map dostępnych może to być na przykład element MapType.

Nie odczytujesz bezpośrednio z rejestru typów map. Zamiast tego: modyfikować rejestr, dodając niestandardowe typy map i powiązane za pomocą wybranego przez Ciebie identyfikatora ciągu. Nie można modyfikować lub zmienić podstawowe typy map (ale można je usunąć mapy, zmieniając wygląd powiązanych mapTypeControlOptions).

Ten kod ustawia tylko mapę na mapie dwa typy map na mapie mapTypeControlOptions i modyfikuje rejestr, dodając powiązanie z do rzeczywistego wdrożenia interfejsu MapType.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

Stylizowane Mapy Google

StyledMapType umożliwia dostosowanie prezentacji standardowych map podstawowych Google, zmieniając wygląd tych elementów. takich jak drogi, parki i tereny zabudowane, które oddają ich inny styl. używane w domyślnym typie mapy.

Więcej informacji o StyledMapType znajdziesz w przewodniku: mapy stylizowane.

Typy map niestandardowych

Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych typów map i zarządzania nimi, co pozwala na implementację z własnych zdjęć lub nakładek kafelków.

W sekcji Maps JavaScript API:

  • Standardowe zestawy kafelków składające się z obrazów, łącznie stanowią pełne mapy kartograficzne. Te kafelki są również określane jako typy map podstawowych. Te typy map działają i zachowują się jak domyślne typy map: roadmap, satellite, hybrid i terrain. Możesz dodać swoje niestandardowy typ mapy na tablicę mapTypes mapy muszą umożliwiać interfejsowi użytkownika Maps JavaScript API traktować niestandardowy typ mapy jako standardowy (włączając go w obiekcie MapType) kontroli rodzicielskiej).
  • nakładki z obrazem, wyświetlane na istniejących typów map podstawowych. Ogólnie te typy map są używane do rozszerzenia istniejącego typu mapy w celu wyświetlenia dodatkowych informacji i często są ograniczone do określonych lokalizacji. i/lub poziom powiększenia. Pamiętaj, że kafelki mogą być przezroczyste, co umożliwia dodawanie funkcji do istniejących map.
  • mapy inne niż graficzne, które umożliwiają modyfikowanie; wyświetlania informacji na mapach na najbardziej podstawowym poziomie.

Każda z tych opcji wymaga utworzenia klasy, która implementuje MapType za pomocą prostego interfejsu online. Dodatkowo Klasa ImageMapType ma wbudowane pewne funkcje zachowania, aby uprościć tworzenie typów map ze zdjęciami.

Interfejs MapType

Zanim utworzysz zajęcia, które implementują interfejs MapType, ważne jest, aby zrozumieć, w jaki sposób Mapy Google określają współrzędne i decyduje, które części mapy wyświetlić. Czynności, które musisz wykonać zastosuj podobną logikę do dowolnych typów mapy podstawowej lub nakładki. Przeczytaj przewodnik po mapach i współrzędne kafelków.

Niestandardowe typy map muszą implementować atrybut MapType za pomocą prostego interfejsu online. Ten interfejs określa określone właściwości metody, które umożliwiają interfejsowi API inicjowanie żądań kierowanych do mapy typy, gdy interfejs API określi, że musi wyświetlić mapę. kafelki w bieżącym widoku i poziomie powiększenia. Ty zarządzasz te żądania decydują, który kafelek do wczytania.

Uwaga: możesz tworzyć własne do implementacji tego interfejsu. Jeśli masz już kompatybilnych zdjęć, można użyć Klasa ImageMapType, która już implementuje w tym interfejsie.

Klasy implementujące interfejs MapType wymagają zdefiniowania i uzupełnienia tych właściwości:

  • tileSize (wymagany) określa rozmiar kafelka (typu google.maps.Size). Rozmiary muszą być prostokątne ale nie muszą być kwadratowe.
  • maxZoom (wymagany) określa maksymalne powiększenie poziomu, na którym mają być wyświetlane fragmenty tego typu mapy.
  • minZoom (opcjonalnie) określa minimalne powiększenie poziom, na którym ma być wyświetlany kafelek tego typu mapy. Domyślnie ta wartość wynosi 0, co oznacza, że brak minimalnej wartości dostępny poziom powiększenia.
  • name (opcjonalnie) określa nazwę tej mapy typu. Ta właściwość jest potrzebna tylko wtedy, gdy chcesz używać mapy tego typu by można było wybrać w elemencie sterującym MapType. (Zobacz Dodaję MapType ustawienia poniżej).
  • alt (opcjonalny) określa tekst zastępczy który wyświetla się po najechaniu kursorem. Ta właściwość jest niezbędna tylko jeśli chcesz, aby ten typ mapy można było wybierać w elemencie sterującym MapType. (Zobacz Dodawanie regulatora MapType below.)

Dodatkowo zajęcia implementujące interfejs MapType musisz wdrożyć następujące metody:

  • Interfejs getTile() (wymagany) jest wywoływany za każdym razem, gdy interfejs API jest wywoływany określa, że na mapie muszą wyświetlić się nowe kafelki dla danego widoczny obszar. Metoda getTile() musi zawierać te elementy podpis:

    getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

    Interfejs API określa, czy musi wywołać funkcję getTile() na podstawie wskaźnika tileSize modelu MapType, minZoom i maxZoom a także bieżącym widocznym obszarem i poziomem powiększenia mapy. Moduł obsługi dla tej metody powinien zwracać element HTML dla danej przekazywanej współrzędnej, poziom powiększenia i element DOM, do którego należy dołączyć obraz kafelka.

  • Interfejs releaseTile() (opcjonalny) jest wywoływany za każdym razem, gdy interfejs API określa, że trzeba usunąć kafelek, który zniknie z widoku mapy. Ta metoda musi mieć następujący podpis:

    releaseTile(tile:Node)

    Należy zwykle usunąć elementy, które zostały dołączone do kafelków mapy po dodaniu do mapy. Jeśli na przykład do kafelka mapy zostały dołączone detektory zdarzeń nakładki, usuń je tutaj.

Metoda getTile() działa jako główny kontroler określając, które kafelki zostaną wczytane w danym obszarze.

Typy map podstawowych

Typy map tworzone w ten sposób mogą być samodzielnie lub w połączeniu z innymi typami map w formie nakładek. Samodzielne typy map są nazywane typami map podstawowych. Przyda Ci się interfejs API traktuje takie niestandardowe pola MapType tak samo jak inne istniejące typ mapy podstawowej (ROADMAP, TERRAIN itp.). Do zrobienia więc dodaj własne MapType do Map Usługa mapTypes. Ta właściwość jest typu MapTypeRegistry

Ten kod tworzy podstawowy element MapType do wyświetlenia współrzędne kafelków na mapie i rysuje kontur tych fragmentów:

TypeScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType {
  tileSize: google.maps.Size;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }

  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }

  releaseTile(tile: HTMLElement): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
      streetViewControl: false,
      mapTypeId: "coordinate",
      mapTypeControlOptions: {
        mapTypeIds: ["coordinate", "roadmap"],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      },
    }
  );

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl =
      (map.getMapTypeId() as string) !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256))
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  maxZoom = 19;
  name = "Tile #s";
  alt = "Tile Coordinate Map Type";
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    div.style.backgroundColor = "#E5E3DF";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
    streetViewControl: false,
    mapTypeId: "coordinate",
    mapTypeControlOptions: {
      mapTypeIds: ["coordinate", "roadmap"],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    },
  });

  map.addListener("maptypeid_changed", () => {
    const showStreetViewControl = map.getMapTypeId() !== "coordinate";

    map.setOptions({
      streetViewControl: showStreetViewControl,
    });
  });
  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set(
    "coordinate",
    new CoordMapType(new google.maps.Size(256, 256)),
  );
}

window.initMap = initMap;
index.js
Zobacz przykład

Zobacz próbkę

Typy nakładanych map

Niektóre typy map są zaprojektowane tak, aby działały na istniejących mapach. . Mapy tego typu mogą mieć przezroczyste warstwy wskazujące ciekawe miejsca lub wyświetlanie użytkownikowi dodatkowych danych.

W takich przypadkach nie chcesz, aby dany typ mapy był traktowany jako oddzielny element, ale jako nakładka. Możesz to zrobić, dodając typ mapy bezpośrednio do istniejącego obiektu MapType za pomocą właściwości overlayMapTypes w narzędziu Map. Ta usługa zawiera MVCArray o MapType s. Wszystkie typy map (podstawa i nakładka) są renderowane w mapPane warstwę. Nakładane typy map będą wyświetlane na mapie podstawowej, w kolejności, w jakiej są wyświetlane na Tablica Map.overlayMapTypes (nakładki o wyższym indeksie są wyświetlane przed nakładkami o niższych wartościach indeksu).

Poniższy przykład jest identyczny z poprzednim oprócz tego, że utworzyliśmy nakładkę z kafelkami MapType na górze mapy typu ROADMAP:

TypeScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

class CoordMapType implements google.maps.MapType {
  tileSize: google.maps.Size;
  alt: string|null = null;
  maxZoom: number = 17;
  minZoom: number = 0;
  name: string|null = null;
  projection: google.maps.Projection|null = null;
  radius: number = 6378137;

  constructor(tileSize: google.maps.Size) {
    this.tileSize = tileSize;
  }
  getTile(
    coord: google.maps.Point,
    zoom: number,
    ownerDocument: Document
  ): HTMLElement {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile: Element): void {}
}

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
  map.overlayMapTypes.insertAt(
    0,
    coordMapType
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */
class CoordMapType {
  tileSize;
  alt = null;
  maxZoom = 17;
  minZoom = 0;
  name = null;
  projection = null;
  radius = 6378137;
  constructor(tileSize) {
    this.tileSize = tileSize;
  }
  getTile(coord, zoom, ownerDocument) {
    const div = ownerDocument.createElement("div");

    div.innerHTML = String(coord);
    div.style.width = this.tileSize.width + "px";
    div.style.height = this.tileSize.height + "px";
    div.style.fontSize = "10";
    div.style.borderStyle = "solid";
    div.style.borderWidth = "1px";
    div.style.borderColor = "#AAAAAA";
    return div;
  }
  releaseTile(tile) {}
}

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: 41.85, lng: -87.65 },
  });
  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  const coordMapType = new CoordMapType(new google.maps.Size(256, 256));

  map.overlayMapTypes.insertAt(0, coordMapType);
}

window.initMap = initMap;
index.js
Zobacz przykład

Zobacz próbkę

Typy map obrazów

Wdrożenie obiektu MapType jako mapy podstawowej by tego typu reklam były czasochłonne i pracochłonne. Interfejs API udostępnia klasę specjalną, która implementuje funkcję MapType z najpopularniejszymi typami map, takimi jak: z kafelków składających się z pojedynczych plików graficznych.

Te zajęcia to ImageMapType, jest utworzone przy użyciu ImageMapTypeOptions specyfikacja obiektu definiująca wymagane właściwości:

  • tileSize (wymagany) określa rozmiar kafelka (typu google.maps.Size). Rozmiary muszą być prostokątne ale nie muszą być kwadratowe.
  • getTileUrl (wymagany) określa funkcję, zwykle jest podawany jako literał funkcji wbudowanej, aby obsługiwać dobór odpowiednich płytek na podstawie dostarczonego zdjęcia, współrzędne świata i poziom powiększenia.

Ten kod implementuje podstawową ImageMapType dzięki zastosowaniu kafelków księżyca Google. W przykładzie użyto normalizacji , aby zapewnić powtarzanie fragmentów wzdłuż osi X, ale nie wzdłuż osi Y mapy.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 0, lng: 0 },
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"],
      },
    }
  );

  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom): string {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }

  return { x: x, y: y };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"],
    },
  });
  const moonMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      if (!normalizedCoord) {
        return "";
      }

      const bound = Math.pow(2, zoom);
      return (
        "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
        "/" +
        zoom +
        "/" +
        normalizedCoord.x +
        "/" +
        (bound - normalizedCoord.y - 1) +
        ".jpg"
      );
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
    radius: 1738000,
    name: "Moon",
  });

  map.mapTypes.set("moon", moonMapType);
  map.setMapTypeId("moon");
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
}

window.initMap = initMap;
index.js
Zobacz przykład

Zobacz próbkę

Prognozy

Ziemia jest trójwymiarową sferą (w przybliżeniu), natomiast jest to płaska, dwuwymiarowa powierzchnia. Mapa, którą widzisz wewnątrz Maps JavaScript API, tak jak każda płaska mapa Ziemi, odwzorowanie tej kuli na płaską powierzchnię. W najprostszy sposób terminach, projekcją można zdefiniować jako mapowanie szerokości i długości geograficznej jako współrzędnych na mapie projekcji.

Prognozy w Maps JavaScript API muszą implementować Interfejs Projection. Projection musi zapewniać mapowanie nie tylko z jednej współrzędnej z systemu do innego, lecz w obu kierunkach. Oznacza to, że musisz określ sposób tłumaczenia na podstawie współrzędnych Ziemi (obiekty: LatLng) do zajęć Projection świat w układzie współrzędnych i odwrotnie. Mapy Google używają odwzorowanie Merkatora na potrzeby tworzenia map na podstawie danych geograficznych i przekształcać zdarzenia na mapie współrzędne geograficzne. Aby uzyskać tę prognozę, należy: dzwonię pod numer getProjection() w: Map (lub dowolny ze standardowych, podstawowych typów MapType). W większości przypadków ten standardowy Projection wystarczy, ale możesz też tworzyć własne prognozy i wykorzystywać je.

Wdrażanie prognozy

Podczas wdrażania niestandardowej prognozy trzeba zdefiniować kilka kwestii:

  • Wzór na mapowanie współrzędnych szerokości i długości geograficznej jest kartezjański i odwrotnie. (Interfejs Projection obsługuje tylko przekształcenia w współrzędne prostokątne).
  • Rozmiar kafelka podstawowego. Wszystkie kafelki muszą być prostokątne.
  • „Wielkość świata” używając kafelka podstawowego ustawionego na poziomie powiększenia 0. Pamiętaj, że w przypadku map złożonych z jednego kafelka przy powiększeniu 0 rozmiar świata i rozmiar kafelka podstawowego.

Skoordynuj transformacje w: Prognozy

Każda prognoza zapewnia dwie metody, które przekładają się między tymi wartościami ze współrzędnymi, co pozwala na przekształcenie danych współrzędne świata:

  • Metoda Projection.fromLatLngToPoint() konwertuje LatLng jako współrzędną światową. Ta metoda jest używana do umieszczania nakładek na mapie (i pozycjonowania samej mapy).
  • Metoda Projection.fromPointToLatLng() konwertuje współrzędną świata do wartości LatLng. Ten jest wykorzystywana do konwersji zdarzeń, takich jak kliknięcia, które mają miejsce na współrzędne geograficzne.

Mapy Google zakładają, że rzuty są prostoliniowe.

Zasadniczo prognozy można używać w dwóch przypadkach: mapy świata lub tworzenia mapy lokalnego obszaru. W tym pierwszym przypadku upewnij się, że rzutowanie jest proste i normalne. na wszystkich długościach geograficznych. Niektóre odwzorowania (zwłaszcza odwzorowania stożkowe) może być „normalne lokalnie” (tzn. wskazuje północ), ale odbiega od rzeczywistej północy; Na przykład im większe położenie mapy względem niektórych długości geograficznej. Można korzystać z takiej odwzorowania lokalnie, ale należy mają świadomość, że rzutowanie musi być niedokładne i przekształcone błędów będą się pojawiać w coraz większym stopniu w miarę oddalania się długości referencyjnej, na której odbiegasz.

Wybór kafelków mapy w odwzorowaniach

Szacunki są przydatne nie tylko przy określaniu pozycji lokalizacji i nakładek, ale także do określania pozycji kafelków mapy. Interfejs Maps JavaScript API renderuje mapy podstawowe za pomocą interfejsu MapType który musi zadeklarować właściwość projection dla identyfikacji rzutu mapy oraz getTile() metoda pobierania fragmentów mapy na podstawie kafelek . Współrzędne kafelka są oparte na zarówno podstawowego rozmiaru kafelka (prostokątnego), jak i „świata”, rozmiar” czyli rozmiar świata mapy w pikselach poziom powiększenia 0. (W przypadku map składających się z jednego kafelka przy powiększeniu 0, i wielkości świata są identyczne).

Określasz rozmiar kafelka podstawowego w zakresie tych elementów (MapType) usługę tileSize. Określasz rozmiar świata wprost w zakresie fromLatLngToPoint() prognozy i fromPointToLatLng().

Dobór zdjęć zależy od przekazywanych wartości, więc jest on przydatny nadawania nazw obrazom, które można wybierać automatycznie na podstawie przekazywane wartości, takie jak map_zoom_tileX_tileY.png

Poniższy przykład definiuje ImageMapType za pomocą Odwzorowanie galaktyk:

TypeScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection

function initMap(): void {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 0,
      center: { lat: 0, lng: 0 },
      mapTypeControl: false,
    }
  );

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords") as HTMLElement;

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng!.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng!.lng());
  });

  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name") as string,
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;

      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;

      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";

      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });

  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));

      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
  // Create a map. Use the Gall-Peters map type.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 0,
    center: { lat: 0, lng: 0 },
    mapTypeControl: false,
  });

  initGallPeters();
  map.mapTypes.set("gallPeters", gallPetersMapType);
  map.setMapTypeId("gallPeters");

  // Show the lat and lng under the mouse cursor.
  const coordsDiv = document.getElementById("coords");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
  map.addListener("mousemove", (event) => {
    coordsDiv.textContent =
      "lat: " +
      Math.round(event.latLng.lat()) +
      ", " +
      "lng: " +
      Math.round(event.latLng.lng());
  });
  // Add some markers to the map.
  map.data.setStyle((feature) => {
    return {
      title: feature.getProperty("name"),
      optimized: false,
    };
  });
  map.data.addGeoJson(cities);
}

let gallPetersMapType;

function initGallPeters() {
  const GALL_PETERS_RANGE_X = 800;
  const GALL_PETERS_RANGE_Y = 512;

  // Fetch Gall-Peters tiles stored locally on our server.
  gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
      const scale = 1 << zoom;
      // Wrap tiles horizontally.
      const x = ((coord.x % scale) + scale) % scale;
      // Don't wrap tiles vertically.
      const y = coord.y;

      if (y < 0 || y >= scale) return "";
      return (
        "https://developers.google.com/maps/documentation/" +
        "javascript/examples/full/images/gall-peters_" +
        zoom +
        "_" +
        x +
        "_" +
        y +
        ".png"
      );
    },
    tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
    minZoom: 0,
    maxZoom: 1,
    name: "Gall-Peters",
  });
  // Describe the Gall-Peters projection used by these tiles.
  gallPetersMapType.projection = {
    fromLatLngToPoint: function (latLng) {
      const latRadians = (latLng.lat() * Math.PI) / 180;
      return new google.maps.Point(
        GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
        GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)),
      );
    },
    fromPointToLatLng: function (point, noWrap) {
      const x = point.x / GALL_PETERS_RANGE_X;
      const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
      return new google.maps.LatLng(
        (Math.asin(1 - 2 * y) * 180) / Math.PI,
        -180 + 360 * x,
        noWrap,
      );
    },
  };
}

// GeoJSON, describing the locations and names of some cities.
const cities = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-87.65, 41.85] },
      properties: { name: "Chicago" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-149.9, 61.218] },
      properties: { name: "Anchorage" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-99.127, 19.427] },
      properties: { name: "Mexico City" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [-0.126, 51.5] },
      properties: { name: "London" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [28.045, -26.201] },
      properties: { name: "Johannesburg" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [15.322, -4.325] },
      properties: { name: "Kinshasa" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [151.207, -33.867] },
      properties: { name: "Sydney" },
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [0, 0] },
      properties: { name: "0°N 0°E" },
    },
  ],
};

window.initMap = initMap;
index.js
Zobacz przykład

Zobacz próbkę