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
dofalse
.
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;
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;
Zobacz próbkę
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;
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;
Zobacz próbkę
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
iterrain
. 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 (typugoogle.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ść wynosi0
, 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 regulatoraMapType
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. MetodagetTile()
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źnikatileSize
modeluMapType
,minZoom
imaxZoom
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;
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;
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;
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;
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 (typugoogle.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;
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;
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()
konwertujeLatLng
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ściLatLng
. 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;
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;