Bu belgede, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri açıklanmaktadır. API, bu haritalar hakkındaki bilgileri saklamak için bir MapType
nesnesi kullanır. MapType
, harita parçalarının görüntülenmesini ve kullanımını ve koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (harita üzerinde) dönüştürülmesini tanımlayan bir arayüzdür. Her MapType
, kartların alınması ve serbest bırakılması için birkaç yöntem ile bunların görsel davranışını tanımlayan özellikler içermelidir.
Maps JavaScript API'deki harita türlerinin iç işleyişi daha ileri bir konudur. Çoğu geliştirici, aşağıda belirtilen temel harita türlerini kullanabilir. Bununla birlikte, Stilli Haritalar'ı kullanarak mevcut harita türlerinin sunumunu değiştirebilir veya özel harita türlerini kullanarak kendi harita desenlerinizi tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın Harita Türü Kaydı'nı nasıl değiştireceğinizi anlamanız gerekir.
Temel Harita Türleri
Maps JavaScript API'de dört tür harita bulunur. Maps JavaScript API, bilindik "boyalı" yol haritası karolarına ek olarak diğer harita türlerini de destekler.
Maps JavaScript API'de aşağıdaki harita türleri kullanılabilir:
roadmap
, varsayılan yol haritası görünümünü gösterir. Bu, varsayılan harita türüdür.satellite
, Google Earth uydu görüntülerini gösterir.hybrid
, normal görünüm ile uydu görünümlerini karışık olarak gösterir.terrain
, arazi bilgilerine dayalı fiziksel bir harita gösterir.
Map
tarafından kullanılan harita türünü, mapTypeId
özelliğini ayarlayarak
Map options
nesnesini ayarlayarak veya haritanın setMapTypeId()
yöntemini
çağırarak değiştirirsiniz. mapTypeID
özelliği varsayılan olarak roadmap
değerine ayarlanır.
İnşaat sırasında mapTypeId
ayarlanıyor:
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);
mapTypeId
öğesini dinamik olarak değiştirme:
map.setMapTypeId('terrain');
Haritanın harita türünü doğrudan ayarlamadığınızı, bunun yerine mapTypeId
değerini bir tanımlayıcı kullanarak MapType
öğesine referans verecek şekilde ayarladığınızı unutmayın.
Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan harita türü kayıt defterinden yararlanır.
45° görüntüler
Maps JavaScript API, belirli konumlar için 45° özel görüntüleri destekler. Bu yüksek çözünürlüklü görüntüler, ana yönlerin her birine (Kuzey, Güney, Doğu, Batı) doğru perspektif görünümleri sağlar. Bu resimler, desteklenen harita türleri için daha yüksek yakınlaştırma düzeylerinde kullanılabilir.
Aşağıdaki resimde, New York'un 45° perspektif görünümü gösterilmektedir:
satellite
ve hybrid
harita türleri, mümkün olduğunda yüksek yakınlaştırma düzeylerinde (12 ve üzeri) 45° görüntüleri destekler. Kullanıcı bu tür görüntülerin bulunduğu bir konumu yakınlaştırırsa, bu harita türleri görünümleri otomatik olarak aşağıdaki şekilde değiştirir:
- Uydu veya karma görüntüler yerine, geçerli konum merkeze alınmış 45° bakış açısı sağlayan görüntüler kullanılır. Varsayılan olarak, bu tür görünümler kuzeye doğrudur. Kullanıcı görüntüyü uzaklaştırırsa varsayılan uydu veya
karma görüntüler tekrar görünür. Bu davranış, yakınlaştırma seviyesine ve
tilt
değerine bağlı olarak değişiklik gösterir: tilt
45 olarak ayarlanmadığı sürece, 12 ile 18 arasındaki yakınlaştırma seviyeleri arasında varsayılan olarak yukarıdan aşağıya temel harita (0°) gösterilir.- 18 veya daha yüksek yakınlaştırma düzeylerinde,
tilt
0'a ayarlanmadığı sürece 45° temel harita gösterilir. - Döndürme denetimi görünür hale gelir. Döndürme denetimi, kullanıcının yatırmayı değiştirebilmesini ve görünümü her iki yönde de 90°'lik artışlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için
rotateControl
değerinifalse
olarak ayarlayın.
45° görüntüler görüntüleyen bir harita türünden uzaklaştırma yapmak bu değişikliklerin her birini geri alarak orijinal harita türlerini yeniden oluşturur.
45° Görüntüleri Etkinleştirme ve Devre Dışı Bırakma
45° görüntüleri, Map
nesnesi için setTilt(0)
çağırarak devre dışı bırakabilirsiniz. Desteklenen harita türlerinde 45° görüntüleri etkinleştirmek için
setTilt(45)
numaralı telefonu arayın. Map
işlevinin getTilt()
yöntemi her zaman, haritada gösterilen geçerli tilt
öğesini yansıtır. Haritada bir tilt
öğesini ayarlar ve daha sonra bu tilt
öğesini kaldırırsanız (örneğin, haritayı uzaklaştırarak) haritanın getTilt()
yöntemi 0
sonucunu döndürür.
Önemli: 45° görüntüler yalnızca kafes haritalarda desteklenir; bu görüntüler vektör haritalarıyla kullanılamaz.
Aşağıdaki örnekte New York şehrinin 45° görünümü gösterilmektedir:
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;
Örneği Deneyin
45° Görüntüleri Döndürme
45°'lik görüntüler, aslında her bir kardina
yön (Kuzey, Güney, Doğu, Batı) için bir görüntü koleksiyonundan oluşur. Haritanız 45° görüntüler gösterdiğinde, Map
nesnesi için setHeading()
yöntemini çağırarak, kuzeyden derece olarak ifade edilen bir sayı değerini ileterek görüntüleri kardinal yönlerinden birine doğru yönlendirebilirsiniz.
Aşağıdaki örnekte bir hava haritası gösterilmektedir ve düğme tıklandığında haritayı her 3 saniyede bir otomatik olarak döndürür:
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;
Örneği Deneyin
Harita Türü Kaydını Değiştirme
Bir haritanın mapTypeId
özelliği, MapType
öğesini benzersiz bir değerle ilişkilendirmek için kullanılan bir dize tanımlayıcısıdır. Her Map
nesnesi, söz konusu harita için kullanılabilir MapType
koleksiyonunu içeren bir MapTypeRegistry
sağlar. Bu kayıt otoritesi, örneğin MapType kontrolünde bulunan harita türlerini seçmek için kullanılır.
Doğrudan harita türü kaydından okuma yapmazsınız. Bunun yerine, özel eşleme türleri ekleyerek ve bunları seçtiğiniz bir dize tanımlayıcısıyla ilişkilendirerek kayıt defterini değiştirebilirsiniz. Temel harita türlerini değiştiremez veya değiştiremezsiniz (ancak haritayla ilişkilendirilmiş mapTypeControlOptions
görünümünün
görünümünü değiştirerek bunları haritadan
kaldırabilirsiniz).
Aşağıdaki kod, haritayı, haritanın mapTypeControlOptions
öğesinde yalnızca iki harita türünü gösterecek şekilde ayarlar ve
MapType
arayüzünün gerçek uygulamasına bu tanımlayıcıyla ilişkilendirmeyi
eklemek için kayıt defterini değiştirir.
// 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);
Stilli Haritalar
StyledMapType
, standart Google temel haritalarının sunumunu özelleştirmenize olanak tanır. Böylece, yol, park ve yerleşim alanı gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stili yansıtacak şekilde değiştirebilirsiniz.
StyledMapType
hakkında daha fazla bilgi edinmek için
stili haritalar rehberine bakın.
Özel Harita Türleri
Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetilmesini destekleyerek kendi harita görüntülerinizi veya karo yer paylaşımlarınızı uygulamanıza olanak tanır.
Maps JavaScript API'de birkaç olası harita türü uygulaması bulunur:
- Toplu olarak tam kartografik haritaları oluşturan resimlerden oluşan standart karo kümeleri. Bu parçalı
kümeler, temel harita türleri olarak da bilinir. Bu harita türleri,
mevcut varsayılan harita türleri gibi davranır ve davranır:
roadmap
,satellite
,hybrid
veterrain
. Maps JavaScript API'deki kullanıcı arayüzünün, özel harita türünüzü standart bir harita türü olarak işlemesini sağlamak için (örneğin, MapType kontrolüne ekleyerek) özel harita türünüzü bir HaritalarmapTypes
dizisine ekleyebilirsiniz. - Mevcut temel harita türlerinin üzerinde görüntülenen resim parçası yer paylaşımları. Genel olarak bu harita türleri, ek bilgiler görüntülemek üzere mevcut bir harita türünü genişletmek için kullanılır ve genellikle belirli konumlar ve/veya yakınlaştırma seviyeleriyle sınırlandırılır. Bu karoların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
- Harita bilgilerinin görünümünü en temel düzeyde değiştirmenize olanak tanıyan, resim olmayan harita türleri.
Bu seçeneklerin her biri, MapType
arayüzünü uygulayan bir sınıf oluşturmaya bağlıdır. Ayrıca
ImageMapType
sınıfı, görüntü haritası türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar da sağlar.
MapType
Arayüzü
MapType
uygulayan sınıflar oluşturmadan önce, Google Haritalar'ın koordinatları nasıl belirlediğini ve haritanın hangi bölümlerinin gösterileceğine nasıl karar verdiğini anlamanız önemlidir. Tüm temel veya yer paylaşımlı harita türleri için benzer bir mantık uygulamanız gerekir.
Harita ve parça koordinatları ile ilgili kılavuzu okuyun.
Özel harita türleri, MapType
arayüzünü uygulamalıdır. Bu arayüz, API, harita karolarını geçerli görüntü alanı ve yakınlaştırma düzeyinde görüntülemesi gerektiğini belirlediğinde, API'nin harita türlerinize istek başlatmasını sağlayan belirli özellikleri ve yöntemleri belirtir. Hangi karonun yükleneceğine karar vermek için bu istekleri siz yerine getirirsiniz.
Not: Bu arayüzü uygulamak için kendi sınıfınızı oluşturabilirsiniz. Alternatif olarak, uyumlu görüntüleriniz varsa zaten bu arayüzü uygulayan
ImageMapType
sınıfını kullanabilirsiniz.
MapType
arayüzünü uygulayan sınıflar aşağıdaki özellikleri tanımlamanızı ve doldurmanızı gerektirir:
tileSize
(zorunlu),google.maps.Size
türünde karonun boyutunu belirtir. Boyutlar dikdörtgen olmalı ancak kare olmamalıdır.maxZoom
(gerekli), bu harita türündeki parçaların gösterileceği maksimum yakınlaştırma düzeyini belirtir.minZoom
(isteğe bağlı), bu harita türündeki parçanın görüntüleneceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer, minimum yakınlaştırma seviyesinin olmadığını gösteren0
şeklindedir.name
(isteğe bağlı) bu harita türünün adını belirtir. Bu özellik yalnızca bu harita türünün bir MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. (AşağıdakiMapType
Denetimleri Ekleme bölümüne bakın.)alt
(isteğe bağlı), bu harita türü için fareyle üzerine gelinen metin olarak gösterilen alternatif metni belirtir. Bu özellik yalnızca bu harita türünün bir MapType kontrolü içinde seçilebilir olmasını istiyorsanız gereklidir. (AşağıdakiMapType
Denetimleri Ekleme konusuna bakın.)
Ayrıca, MapType
arayüzünü uygulayan sınıfların aşağıdaki yöntemleri uygulaması gerekir:
-
API, haritanın belirli bir görüntü alanı için yeni parçalar görüntülemesi gerektiğini belirlediğinde
getTile()
(zorunlu) çağrılır.getTile()
yöntemi aşağıdaki imzaya sahip olmalıdır:getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node
API;
MapType
öğesinintileSize
,minZoom
vemaxZoom
özelliklerinin yanı sıra haritanın mevcut görüntü alanı ve yakınlaştırma düzeyine göregetTile()
öğesini çağırması gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, iletilen koordinat, yakınlaştırma seviyesi ve parça resminin ekleneceği DOM öğesine sahip bir HTML öğesi döndürmelidir. -
API, haritanın görünümden düştüğünde bir karoyu kaldırması gerektiğini belirlediğinde,
releaseTile()
(isteğe bağlı) çağrılır. Bu yöntem aşağıdaki imzaya sahip olmalıdır:releaseTile(tile:Node)
Normalde, haritaya eklendikten sonra harita parçalarına eklenmiş tüm öğeleri kaldırmanız gerekir. Örneğin, harita bölümü yer paylaşımlarına etkinlik işleyiciler eklediyseniz bunları buradan kaldırmanız gerekir.
getTile()
yöntemi, belirli bir görüntü alanında hangi karoların yükleneceğini belirlemede ana denetleyici görevi görür.
Temel Harita Türleri
Bu şekilde oluşturduğunuz harita türleri tek başına ya da bindirme olarak diğer harita türleriyle birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu tür özel MapType
'leri mevcut diğer temel harita türlerinde (ROADMAP
, TERRAIN
vb.) olduğu gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType
öğenizi Map
mapTypes
özelliğine ekleyin. Bu özellik MapTypeRegistry
türünde.
Aşağıdaki kod, haritanın karo koordinatlarını görüntülemek
için temel MapType
oluşturur ve karoların ana hatlarını çizer:
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;
Örneği Deneyin
Bindirme Harita Türleri
Bazı harita türleri, mevcut harita türlerinin üzerinde çalışacak şekilde tasarlanmıştır. Bu tür harita türlerinde önemli yerleri gösteren veya kullanıcıya ek veriler gösteren şeffaf katmanlar bulunabilir.
Böyle durumlarda, harita türünün ayrı bir öğe yerine bir yer paylaşımı olarak ele alınmasını istersiniz.
Bunu, harita türünü doğrudan Map
overlayMapTypes
özelliğini kullanıp mevcut bir MapType
öğesine ekleyerek yapabilirsiniz. Bu özellikte MVCArray
/MapType
yer alıyor. Tüm harita türleri (ana ve yer paylaşımı) mapPane
katmanında oluşturulur. Bindirme haritası türleri, bağlı oldukları temel haritanın üstünde, Map.overlayMapTypes
dizisinde göründükleri sırayla gösterilir (daha yüksek dizin değerlerine sahip yer paylaşımları, daha düşük dizin değerlerine sahip yer paylaşımlarının önünde gösterilir).
Aşağıdaki örnek, ROADMAP
harita türünün üzerinde bir karo yer paylaşımı MapType
oluşturmamız dışında önceki örnekle aynıdır:
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;
Örneği Deneyin
Resim Haritası Türleri
Temel harita türü olarak kullanmak için MapType
uygulamak zaman alıcı ve zahmetli bir iş olabilir. API, en yaygın harita türleri (tek resim dosyalarından oluşan karolardan oluşan harita türleri) için MapType
arayüzünü uygulayan özel bir sınıf sağlar.
Bu sınıf (ImageMapType
), aşağıdaki gerekli özellikleri tanımlayan bir ImageMapTypeOptions
nesne spesifikasyonu kullanılarak oluşturulur:
tileSize
(zorunlu),google.maps.Size
türünde karonun boyutunu belirtir. Boyutlar dikdörtgen olmalı ancak kare olmamalıdır.getTileUrl
(gerekli), sağlanan dünya koordinatlarına ve yakınlaştırma seviyesine göre uygun resim karosunun seçimini işlemek için genellikle satır içi işlev sabit değeri olarak sağlanan işlevi belirtir.
Aşağıdaki kod, Google'ın ay karolarını kullanarak temel bir ImageMapType
uygular. Örnekte, blokların x ekseni boyunca tekrarlandığından,
haritanızın y ekseninde yapmadığından
emin olmak için bir normalleştirme işlevi kullanılmaktadır.
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;
Örneği Deneyin
Tahminler
Dünya üç boyutlu bir küre (yaklaşık olarak), harita ise düz bir iki boyutlu yüzeydir. Maps JavaScript API'de gördüğünüz harita, Dünya'nın herhangi bir düz haritası gibi, söz konusu kürenin düz bir yüzeye projeksiyonudur. En basit haliyle projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatların eşleştirilmesi olarak tanımlanabilir.
Maps JavaScript API'deki projeksiyonlar Projection
arayüzünü uygulamalıdır. Projection
uygulaması yalnızca bir koordinat sisteminden diğerine eşleme değil, çift yönlü eşleme de sağlamalıdır. Yani, Earth koordinatlarından (LatLng
nesne) Projection
sınıfının dünya koordinatı sistemine (veya tam tersi) nasıl çeviri yapılacağını tanımlamanız gerekir. Google Haritalar, coğrafi verilerden harita oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu projeksiyonu, Map
üzerinde (veya standart taban MapType
türlerinden herhangi birinde) getProjection()
yöntemini çağırarak elde edebilirsiniz. Çoğu kullanım için bu standart Projection
yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.
Projeksiyon Uygulama
Özel projeksiyon uygularken birkaç şeyi tanımlamanız gerekir:
- Enlem ve boylam koordinatlarının Kartezyen düzlemde (veya tam tersi) eşlenmesine ilişkin formül. (
Projection
arayüzü yalnızca doğrusal koordinatlara dönüşümleri destekler.) - Taban karo boyutu. Tüm karolar dikdörtgen olmalıdır.
- Yakınlaştırma düzeyi 0'a ayarlanmış taban parçanın kullanıldığı bir haritanın "dünya boyutu". Yakınlaştırma seviyesi 0 olan tek parçadan oluşan haritalar için dünya ve taban karo boyutunun aynı olduğunu unutmayın.
Projeksiyonlarda Dönüşümleri Koordine Etme
Her projeksiyon, bu iki koordinat sistemi arasında çeviri yapan iki yöntem sunarak coğrafi ve dünya koordinatları arasında dönüştürme yapmanızı sağlar:
Projection.fromLatLngToPoint()
yöntemi,LatLng
değerini dünya koordinatına dönüştürür. Bu yöntem, harita üzerindeki bindirmeleri konumlandırmak (ve haritanın kendisini konumlandırmak) için kullanılır.Projection.fromPointToLatLng()
yöntemi, bir dünya koordinatınıLatLng
değerine dönüştürür. Bu yöntem, haritada gerçekleşen tıklamalar gibi etkinlikleri coğrafi koordinatlara dönüştürmek için kullanılır.
Google Haritalar projeksiyonların doğrusal olduğunu varsayar.
Projeksiyonu genellikle iki durum için kullanabilirsiniz: dünya haritası oluşturmak veya yerel bir bölgenin haritasını oluşturmak. Aynı durumda, projeksiyonunuzun tüm boylamlarda da doğrusal ve normal olduğundan emin olmalısınız. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (yani, kuzeye işaret) olabilir, ancak gerçek kuzeyden sapabilir; örneğin, harita bir referans boylama göre daha ileri bir konuma yerleştirilir. Böyle bir projeksiyonu yerel olarak kullanabilirsiniz, ancak projeksiyonun kesinliksiz olduğunu ve dönüştürme hatalarının görünüşe göre saptığınız referans boylamdan gittikçe uzaklaşacağını unutmayın.
Projeksiyonlarda Harita Parçası Seçimi
Projeksiyonlar yalnızca konumların veya bindirmelerin konumlarını belirlemek için değil, harita parçalarının kendilerini konumlandırmak için de yararlı olur.
Maps JavaScript API, temel haritaları bir MapType
arayüzü kullanarak oluşturur. Bu arayüzde, haritanın projeksiyonunu tanımlamak için hem projection
özelliği hem de harita parçalarını almak için parça koordinatı değerlerine göre getTile()
yöntemi belirtilmelidir. Karo koordinatları, hem temel karo boyutuna (dikdörtgen şeklinde olmalıdır) hem de haritanızın "dünya boyutuna" bağlıdır. Bu, harita dünyanızın 0 yakınlaştırma düzeyinde piksel boyutudur. (Yakınlaştırma seviyesi 0 olan tek parçadan oluşan haritalar için karo boyutu ve dünya boyutu aynıdır.)
Temel karo boyutunu MapType
öğenizin tileSize
özelliğinde tanımlarsınız. Dünya boyutunu, projeksiyonunuzun fromLatLngToPoint()
ve fromPointToLatLng()
yöntemlerinde dolaylı olarak tanımlarsınız.
Görüntü seçimi bu iletilen değerlere bağlı olduğundan, map_zoom_tileX_tileY.png
gibi aktarılan bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak yararlı olur.
Aşağıdaki örnekte
Gall-Peters projeksiyonu kullanılarak bir ImageMapType
tanımlanmaktadır:
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;