Bu belgede, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri ele alınmaktadır. API, bu haritalarla ilgili bilgileri tutmak için MapType
nesnesini kullanır. MapType
, harita döşemelerinin gösterimini ve kullanımını, koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (haritada) çevrilmesini tanımlayan bir arayüzdür. Her MapType
, kutucukların alınmasını ve yayınlanmasını işlemek için birkaç yöntem ve görsel davranışını tanımlayan özellikler içermelidir.
Maps JavaScript API'deki harita türlerinin iç işleyişi ileri düzey bir konudur. Çoğu geliştirici, aşağıda belirtilen temel harita türlerini kullanabilir. Ancak, Stil Verilmiş Haritalar'ı kullanarak mevcut harita türlerinin sunumunu da değiştirebilir veya özel harita türlerini kullanarak kendi harita döşemelerinizi tanımlayabilirsiniz. Özel harita türleri sağlarken haritanın Harita Türü Kayıt Defteri'ni 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, alışkın olduğumuz "boyalı" yol haritası döşemelerine 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 ve uydu görünümlerinin bir karışımını gösterir.terrain
, arazi bilgilerine dayalı bir fiziksel harita gösterir.
Map
öğesinin mapTypeId
özelliğini ayarlayarak, oluşturucu içinde Map options
nesnesini ayarlayarak veya haritanın setMapTypeId()
yöntemini çağırarak kullanılan harita türünü değiştirebilirsiniz. mapTypeID
özelliği varsayılan olarak roadmap
değerine ayarlanır.
İnşaat sırasında mapTypeId
'ı ayarlama:
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 bir tanımlayıcı kullanarak MapType
öğesine referans verecek şekilde mapTypeId
öğesini ayarladığınızı unutmayın.
Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan bir harita türü kaydı kullanır.
45° Görüntüler
Maps JavaScript API, belirli konumlar için özel 45° görüntüleri destekler. Bu yüksek çözünürlüklü görüntüler, her bir ana yöne (kuzey, güney, doğu, batı) doğru perspektif görünümler sunar. Bu görüntüler, desteklenen harita türlerinde daha yüksek yakınlaştırma düzeylerinde kullanılabilir.
Aşağıdaki resimde New York City'nin 45° perspektif görünümü gösterilmektedir:
satellite
ve hybrid
harita türleri, 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ümlerini otomatik olarak aşağıdaki şekilde değiştirir:
- Uydu veya karma görüntüler, mevcut konuma odaklanmış 45° perspektif veren görüntülerle değiştirilir. Varsayılan olarak bu tür görünümler kuzeye yöneliktir. Kullanıcı uzaklaştırırsa varsayılan uydu veya karma görüntü tekrar görünür. Davranış, yakınlaştırma düzeyine ve
tilt
değerine bağlı olarak değişir: - 12 ile 18 arasındaki yakınlaştırma düzeylerinde,
tilt
45 olarak ayarlanmadığı sürece varsayılan olarak yukarıdan aşağıya temel harita (0°) gösterilir. - 18 veya daha yüksek yakınlaştırma düzeylerinde, 45° temel harita görüntülenir. Ancak
tilt
0 olarak ayarlanırsa bu durum geçerli olmaz. - Döndürme kontrolü görünür hale gelir. Döndürme denetimi, kullanıcının eğme işlevini açıp kapatmasına ve görünümü her iki yönde 90 derecelik artışlarla döndürmesine olanak tanıyan seçenekler sunar. Döndürme kontrolünü gizlemek için
rotateControl
öğesinifalse
olarak ayarlayın.
45° görüntüleri gösteren bir harita türünde uzaklaştırma işlemi, bu değişikliklerin her birini geri alır ve orijinal harita türlerini yeniden oluşturur.
45° görüntüleri etkinleştirme ve devre dışı bırakma
setTilt(0)
nesnesinde Map
işlevini çağırarak 45 derecelik görüntüleri devre dışı bırakabilirsiniz. Desteklenen harita türlerinde 45° görüntüleri etkinleştirmek için setTilt(45)
numaralı telefonu arayın. Map
'nın getTilt()
yöntemi, haritada gösterilen mevcut tilt
değerini her zaman yansıtır. Haritada bir tilt
ayarlayıp daha sonra bu tilt
değerini kaldırırsanız (ör. haritayı uzaklaştırarak) haritanın getTilt()
yöntemi 0
değerini döndürür.
Önemli: 45° görüntü yalnızca raster haritalarda desteklenir. Bu görüntü vektör haritalarda kullanılamaz.
Aşağıdaki örnekte New York City'nin 45 derecelik 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° açılı görüntüler aslında her ana yön (kuzey, güney, doğu, batı) için bir dizi görüntüden oluşur. Haritanızda 45° görüntüleri gösterildikten sonra, setHeading()
işlevini Map
nesnesinde çağırarak ve kuzeyden derece olarak ifade edilen bir sayı değeri ileterek görüntüleri ana yönlerden birine doğru yönlendirebilirsiniz.
Aşağıdaki örnekte, bir hava haritası gösterilmekte ve düğme tıklandığında harita her 3 saniyede bir otomatik olarak döndürülmektedir:
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ü Kayıt Defteri'ni değiştirme
Bir haritanın mapTypeId
, MapType
ile benzersiz bir değeri ilişkilendirmek için kullanılan dize tanımlayıcıdır. Her Map
nesnesi, söz konusu harita için kullanılabilir MapType
'ların koleksiyonunu içeren bir MapTypeRegistry
tutar. Bu kayıt defteri, örneğin Harita'nın MapType kontrolünde kullanılabilen harita türlerini seçmek için kullanılır.
Doğrudan harita türü kayıt defterinden okumazsınız. Bunun yerine, özel harita türleri ekleyerek ve bunları seçtiğiniz bir dize tanımlayıcısıyla ilişkilendirerek kayıt defterini değiştirirsiniz. Temel harita türlerini değiştiremez veya üzerinde oynayamazsınız (ancak haritanın ilişkili mapTypeControlOptions
görünümünü değiştirerek bunları haritadan kaldırabilirsiniz).
Aşağıdaki kod, haritayı yalnızca iki harita türünü gösterecek şekilde ayarlar ve kayıt defterini, bu tanımlayıcıyla ilişkilendirmeyi mapTypeControlOptions
arayüzünün gerçek uygulamasına ekleyecek şekilde değiştirir.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);
Stilli Haritalar
StyledMapType
, standart Google temel haritalarının sunumunu özelleştirmenize olanak tanır. Böylece yollar, parklar ve yerleşim alanları gibi öğelerin görsel gösterimini, varsayılan harita türünde kullanılan stilden farklı bir stili yansıtacak şekilde değiştirebilirsiniz. StyledMapType
yalnızca varsayılan roadmap
harita türünü etkiler.
StyledMapType
hakkında daha fazla bilgi için Yerleştirilmiş JSON stili
bildirimlerini kullanma başlıklı makaleyi inceleyin.
Özel Harita Türleri
Maps JavaScript API, özel harita türlerinin görüntülenmesini ve yönetilmesini destekler. Bu sayede, kendi harita görüntülerinizi veya döşeme katmanlarınızı uygulayabilirsiniz.
Maps JavaScript API'de birkaç olası harita türü uygulaması vardır:
- Birlikte tam kartografik haritaları oluşturan resimlerden oluşan standart karo kümeleri. Bu döşeme kümeleri temel harita türleri olarak da bilinir. Bu harita türleri,
mevcut varsayılan harita türleri gibi çalışı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 değerlendirmesini sağlamak için (örneğin, MapType denetimine dahil ederek) özel harita türünüzü bir Map'inmapTypes
dizisine ekleyebilirsiniz. - Mevcut temel harita türlerinin üzerinde gösterilen resim karo yer paylaşımları. Genellikle bu harita türleri, ek bilgileri göstermek için mevcut bir harita türünü desteklemek amacıyla kullanılır ve genellikle belirli konumlar ve/veya yakınlaştırma düzeyleriyle sınırlıdır. Bu kutucukların şeffaf olabileceğini ve mevcut haritalara özellik eklemenize olanak tanıyabileceğini unutmayın.
- Harita bilgilerinin en temel düzeyde gösterimini değiştirmenize olanak tanıyan, görüntü olmayan harita türleri.
Bu seçeneklerin her biri, MapType
arayüzünü uygulayan bir sınıf oluşturmaya dayanı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 sağlar.
MapType
Arabirimi
MapType
uygulayan sınıflar oluşturmadan önce Google Haritalar'ın koordinatları nasıl belirlediğini ve haritanın hangi bölümlerini göstereceğine nasıl karar verdiğini anlamanız önemlidir. Temel veya yer paylaşımı harita türleri için benzer bir mantık uygulamanız gerekir.
Harita ve karo koordinatları kılavuzunu okuyun.
Özel harita türleri, MapType
arayüzünü uygulamalıdır. Bu arayüz, API'nin mevcut görünüm penceresinde ve yakınlaştırma düzeyinde harita döşemelerini göstermesi gerektiğini belirlediğinde API'nin harita türlerinize istek başlatmasına olanak tanıyan belirli özellikleri ve yöntemleri belirtir. Hangi kutucuğun yükleneceğine karar vermek için bu istekleri işlersiniz.
Not: Bu arayüzü uygulamak için kendi sınıfınızı oluşturabilirsiniz. Alternatif olarak, uyumlu resimleriniz varsa bu arayüzü zaten uygulayan
ImageMapType
sınıfını kullanabilirsiniz.
MapType
arayüzünü uygulayan sınıfların aşağıdaki özellikleri tanımlamanız ve doldurmanız gerekir:
tileSize
(zorunlu), karo boyutunu (google.maps.Size
türünde) belirtir. Boyutlar dikdörtgen olmalıdır ancak kare olması gerekmez.maxZoom
(zorunlu), bu harita türünün döşemelerinin görüntüleneceği maksimum yakınlaştırma düzeyini belirtir.minZoom
(isteğe bağlı) Bu harita türünün döşemesinin gösterileceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer0
'dır. Bu değer, minimum yakınlaştırma düzeyi olmadığını gösterir.name
(isteğe bağlı), bu harita türünün adını belirtir. Bu özellik yalnızca bu harita türünün MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. ( Kontrol Seçenekleri bölümüne bakın.)alt
(isteğe bağlı) Bu harita türü için alternatif metni belirtir. Bu metin, fareyle üzerine gelindiğinde gösterilir. Bu özellik yalnızca bu harita türünün MapType kontrolünde seçilebilir olmasını istiyorsanız gereklidir. (Kontrol Seçenekleri bölümüne bakın.)
Ayrıca, MapType
arayüzünü uygulayan sınıfların aşağıdaki yöntemleri uygulaması gerekir:
-
getTile()
(gerekli), API haritanın belirli bir görüntü alanı için yeni kutucuklar göstermesi gerektiğini her belirlediğinde çağrılır.getTile()
yöntemi aşağıdaki imzaya sahip olmalıdır:getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node
API,
getTile()
özelliğini çağırması gerekip gerekmediğiniMapType
'nintileSize
,minZoom
vemaxZoom
özelliklerine, haritanın mevcut görünüm alanına ve yakınlaştırma düzeyine göre belirler. Bu yöntemin işleyicisi, iletilen bir koordinat, yakınlaştırma düzeyi ve döşeme resminin ekleneceği DOM öğesi verildiğinde bir HTML öğesi döndürmelidir. -
releaseTile()
(isteğe bağlı), API, haritanın görünüm dışında kaldığı için bir karo kaldırması gerektiğini belirlediğinde çağrılır. Bu yöntemin aşağıdaki imzaya sahip olması gerekir:releaseTile(tile:Node)
Genellikle, harita döşemelerine eklenen öğelerin kaldırılmasını siz yönetmelisiniz. Örneğin, harita döşemesi yer paylaşımlarına etkinlik işleyicileri eklediyseniz bunları buradan kaldırmanız gerekir.
getTile()
yöntemi, belirli bir görüntü alanında hangi döşemelerin yükleneceğini belirlemek için ana denetleyici görevi görür.
Temel Harita Türleri
Bu şekilde oluşturduğunuz harita türleri tek başına kullanılabilir veya diğer harita türleriyle yer paylaşımı olarak birleştirilebilir. Bağımsız harita türleri temel harita türleri olarak bilinir. API'nin bu tür özel MapType
'leri diğer mevcut temel harita türleri (ROADMAP
, TERRAIN
vb.) gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType
değerinizi Map
öğesinin mapTypes
özelliğine ekleyin. Bu mülk, MapTypeRegistry
türündedir.
Aşağıdaki kod, haritanın karo koordinatlarını görüntülemek için temel bir 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
Harita Türlerini Yerleştirme
Bazı harita türleri, mevcut harita türlerinin üzerinde çalışacak şekilde tasarlanmıştır. Bu tür haritalarda ilgi çekici yerleri gösteren şeffaf katmanlar veya kullanıcıya ek veriler gösteren katmanlar olabilir.
Bu durumlarda, harita türünün ayrı bir öğe olarak değil, yer paylaşımı olarak değerlendirilmesini istersiniz.
Bunu, Map
öğesinin overlayMapTypes
özelliğini kullanarak harita türünü doğrudan mevcut bir MapType
öğesine ekleyerek yapabilirsiniz. Bu mülk, MapType
öğelerinin MVCArray
değerini içeriyor. Tüm harita türleri (temel ve yer paylaşımı) mapPane
katmanında oluşturulur. Yer paylaşımı harita türleri, bağlı oldukları temel haritanın üzerinde, 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 üzerine MapType
döşeme yerleşimi oluşturmamız dışında öncekiyle 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 kullanılacak bir MapType
uygulamak zaman alıcı ve zahmetli bir iş olabilir. API, en yaygın harita türleri için MapType
arayüzünü uygulayan özel bir sınıf sağlar: Tek resim dosyalarından oluşan döşemelerden oluşan harita türleri.
ImageMapType
sınıfı olan bu sınıf, aşağıdaki gerekli özellikleri tanımlayan bir ImageMapTypeOptions
nesne spesifikasyonu kullanılarak oluşturulur:
tileSize
(zorunlu), karo boyutunu (google.maps.Size
türünde) belirtir. Boyutlar dikdörtgen olmalıdır ancak kare olması gerekmez.getTileUrl
(zorunlu) işlevi belirtir. Genellikle satır içi işlev değişmezi olarak sağlanır ve sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim döşemesinin seçilmesini sağlar.
Aşağıdaki kod, Google'ın ay döşemeleri kullanılarak temel bir ImageMapType
uygular. Bu örnekte, döşemelerin haritanızın y ekseni boyunca değil, x ekseni boyunca tekrar etmesini sağlamak için bir normalleştirme işlevi kullanılı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) iken harita, iki boyutlu düz bir yüzeydir. Maps JavaScript API'de gördüğünüz harita, tıpkı Dünya'nın düz bir haritası gibi, kürenin düz bir yüzeye projeksiyonudur. En basit haliyle projeksiyon, enlem/boylam değerlerinin projeksiyon haritasındaki koordinatlara eşlenmesi olarak tanımlanabilir.
Maps JavaScript API'deki projeksiyonlar Projection
arayüzünü uygulamalıdır. Projection
uygulaması, bir koordinat sisteminden diğerine eşleme sağlamanın yanı sıra çift yönlü eşleme de sağlamalıdır. Yani, Dünya koordinatlarından (LatLng
nesneleri) Projection
sınıfının dünya koordinat sistemine ve dünya koordinat sisteminden tekrar Dünya koordinatlarına nasıl çeviri yapılacağını tanımlamanız gerekir.
Google Haritalar, coğrafi verilerden haritalar oluşturmak ve haritadaki etkinlikleri coğrafi koordinatlara dönüştürmek için Mercator projeksiyonunu kullanır. Bu tahmini Map
üzerindeki getProjection()
numaralı telefonu arayarak (veya standart temel MapType
türlerinden herhangi birini kullanarak) alabilirsiniz. Çoğu kullanım için bu standart Projection
yeterli olacaktır ancak kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.
Tahmin Uygulama
Özel bir projeksiyon uygularken birkaç şeyi tanımlamanız gerekir:
- Enlem ve boylam koordinatlarını bir Kartezyen düzleme eşleme formülleri ve Kartezyen düzlemden enlem ve boylam koordinatlarına eşleme formülleri. (
Projection
arayüzü yalnızca doğrusal koordinatlara dönüştürmeyi destekler.) - Temel karo boyutu. Tüm kutular dikdörtgen olmalıdır.
- Yakınlaştırma düzeyi 0'da temel karo grubu kullanılarak oluşturulan bir haritanın "dünya boyutu". 0 yakınlaştırma düzeyinde tek bir kutudan oluşan haritalarda dünya boyutu ve temel kutu 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 sunar. Bu sayede coğrafi koordinatlar ile dünya koordinatları arasında dönüşüm yapabilirsiniz:
Projection.fromLatLngToPoint()
yöntemi,LatLng
değerini dünya koordinatına dönüştürür. Bu yöntem, haritadaki yer paylaşımlarını (ve haritanın kendisini) konumlandırmak için kullanılır.Projection.fromPointToLatLng()
yöntemi, 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.
Genel olarak, iki durumda projeksiyon kullanabilirsiniz: dünya haritası oluşturmak veya yerel bir bölgenin haritasını oluşturmak. İlk durumda, projeksiyonunuzun tüm boylamlarda doğrusal ve normal olduğundan emin olmalısınız. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (yani kuzeyi gösterir) olabilir ancak gerçek kuzeyden sapabilir. Örneğin, harita bazı referans boylamlarına göre ne kadar uzağa yerleştirilirse sapma o kadar fazla olur. Bu tür bir projeksiyonu yerel olarak kullanabilirsiniz ancak projeksiyonun zorunlu olarak kesin olmadığını ve referans boylamdan uzaklaştıkça dönüşüm hatalarının giderek daha belirgin hale geleceğini unutmayın.
Tahminlerde harita kutusu seçimi
Projeksiyonlar yalnızca konumların veya yer paylaşımlarının konumlarını belirlemek için değil, harita döşemelerinin kendilerini konumlandırmak için de yararlıdır.
Maps JavaScript API, MapType
arayüzünü kullanarak temel haritaları oluşturur. Bu arayüz, haritanın projeksiyonunu tanımlamak için projection
özelliğini ve tile koordinat değerlerine göre harita döşemelerini almak için getTile()
yöntemini bildirmelidir. Karo koordinatları, hem temel karo boyutunuza (dikdörtgen olmalıdır) hem de haritanızın "dünya boyutuna" (yakınlaştırma düzeyi 0'da harita dünyanızın piksel boyutu) göre belirlenir. (0 yakınlaştırma düzeyinde tek bir kutudan oluşan haritalarda kutu boyutu ve dünya boyutu aynıdır.)
Temel döşeme boyutunu MapType
öğenizin tileSize
özelliği içinde tanımlarsınız. Dünya boyutunu, projeksiyonunuzun fromLatLngToPoint()
ve fromPointToLatLng()
yöntemlerinde dolaylı olarak tanımlarsınız.
Resim seçimi bu aktarılan değerlere bağlı olduğundan, bu aktarılan değerler göz önünde bulundurularak programatik olarak seçilebilecek resimleri adlandırmak faydalıdır. Örneğin: map_zoom_tileX_tileY.png
.
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;