Bu belgede, Maps JavaScript API'yi kullanarak görüntüleyebileceğiniz harita türleri açıklanmaktadır. API, bu haritalarla ilgili bilgileri saklamak için bir MapType
nesnesi kullanır. MapType
, harita parçalarının görüntülenmesi ve kullanımının yanı sıra koordinat sistemlerinin ekran koordinatlarından dünya koordinatlarına (harita üzerinde) çevrilmesini tanımlayan bir arayüzdür. Her MapType
, kartların alınmasını ve yayınlanmasını yönetmek 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, Stilli Haritalar'ı kullanarak mevcut harita türlerinin sunumunu değiştirebilir veya özel harita türlerini kullanarak kendi harita karolarınızı tanımlayabilirsiniz. Özel harita türleri sağlarken, haritanın Harita Türü Kaydı'nda nasıl değişiklik yapacağınızı anlamanız gerekir.
Temel Harita Türleri
Maps JavaScript API'de dört harita türü bulunur. Bilinen "boyalı" yol haritası döşemelerine ek olarak, Maps JavaScript API, 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 karışımını gösterir.terrain
, arazi bilgilerine dayalı fiziksel bir harita görüntüler.
Map
tarafından kullanılan harita türünü, Map options
nesnesini ayarlayarak oluşturucunun içinde veya haritanın setMapTypeId()
yöntemini çağırarak harita türünün mapTypeId
özelliğini ayarlayarak değiştirirsiniz. 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');
Aslında haritanın harita türünü doğrudan belirlemezsiniz. Bunun yerine, haritanın mapTypeId
özelliğini, bir tanımlayıcı kullanarak bir MapType
referansına yönlendirecek şekilde ayarlayın.
Maps JavaScript API, bu referansları yönetmek için aşağıda açıklanan bir harita türü kayıt defteri 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, ana yönlerin her birine (Kuzey, Güney, Doğu, Batı) doğru perspektif görünümleri sunar. 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 şehrinin 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, geçerli konumun merkezinde 45° bakış açısı sağlayan görüntülerle değiştirilir. Bu tür görünümler varsayılan olarak kuzeye doğrudur. Kullanıcı görüntüyü uzaklaştırırsa varsayılan uydu veya karma görüntü tekrar gösterilir. Davranış, yakınlaştırma düzeyine ve
tilt
değerine göre değişir: tilt
45 değerine ayarlanmadığı sürece, yakınlaştırma düzeyleri 12 ile 18 arasında olduğunda yukarıdan aşağıya temel harita (0°) varsayılan olarak gösterilir.tilt
0'a ayarlanmadığı sürece 18 veya daha yüksek yakınlaştırma düzeylerinde 45° temel harita görüntülenir.- Döndürme denetimi görünür hale gelir. Döndürme kontrolü, kullanıcının yatırmayı açıp kapatmasını ve görünümü her iki yönde 90°'lik artımlarla döndürmesini sağlayan seçenekler sunar. Döndürme kontrolünü gizlemek için
rotateControl
öğesinifalse
olarak ayarlayın.
45° görüntülerin gösterildiği bir harita türünü uzaklaştırdığınızda, bu değişikliklerin her biri geri alınarak orijinal harita türleri yeniden oluşturulur.
45° Görüntüleri Etkinleştirme ve Devre Dışı Bırakma
Map
nesnesinde setTilt(0)
yöntemini çağırarak 45° 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
'in getTilt()
yöntemi, her zaman haritada gösterilen geçerli tilt
bilgisini yansıtır. Haritada bir tilt
ayarlayıp 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 kafesli 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üler Döndürülüyor
45° görüntüler aslında her bir ana yöne (Kuzey, Güney, Doğu, Batı) ait bir dizi resimden oluşur. Haritanız 45° görüntüler görüntülediğinde, Map
nesnesinde setHeading()
işlevini çağırarak ve kuzeyden derece olarak ifade edilen bir sayı değeri ileterek görüntüleri ana yönlerden birine yönlendirebilirsiniz.
Aşağıdaki örnekte havadan bir harita 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 dize tanımlayıcısıdır. Her Map
nesnesi, bu harita için kullanılabilir MapType
koleksiyonunu içeren bir MapTypeRegistry
içerir. Bu kayıt otoritesi, örneğin, Map'in MapType denetiminde bulunan harita türlerini seçmek için kullanılır.
Harita türü kaydından doğrudan okumazsınız. Bunun yerine, özel harita türleri ekleyip 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 değiştiremezsiniz (ancak haritanın ilişkilendirilmiş mapTypeControlOptions
görünümünü değiştirerek bunları haritadan kaldırabilirsiniz).
Aşağıdaki kod, haritayı, mapTypeControlOptions
öğesinde yalnızca iki harita türünü gösterecek şekilde ayarlar ve kayıt defterini, bu tanımlayıcıyla ilişkilendirmeyi MapType
arayüzünün gerçek uygulamasına ekleyecek şekilde 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. Bu sayede yollar, parklar ve yerleşim alanları gibi öğelerin görsel görünümünü, varsayılan harita türünde kullanılandan farklı bir stil yansıtacak şekilde değiştirebilirsiniz.
StyledMapType
hakkında daha fazla bilgi için stilli 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 kartografik haritaları oluşturan resimlerden oluşan standart karo grupları. Bu parça grupları, temel harita türleri olarak da bilinir. Şu harita türleri, mevcut varsayılan harita türleri gibi davranır:
roadmap
,satellite
,hybrid
veterrain
. Özel harita türünüzü bir Harita'nınmapTypes
dizisine ekleyebilirsiniz. Böylece, Maps JavaScript API'deki kullanıcı arayüzünün, özel harita türünüzü standart bir harita türü olarak değerlendirmesi (örneğin, MapType denetimine dahil edilebilir) için geçerlidir. - Mevcut temel harita türlerinin üzerinde gösterilen resim parçası yer paylaşımları. Bu harita türleri genellikle ek bilgi görüntülemek amacıyla mevcut bir harita türünü genişletmek için kullanılır ve çoğu zaman belirli konumlar ve/veya yakınlaştırma düzeyleriyle sınırlıdır. Bu karoların şeffaf olabileceğini ve mevcut haritalara özellik ekleyebileceğinizi unutmayın.
- Harita bilgilerinin görüntüsünü en temel düzeyde değiştirmenize olanak tanıyan, görsel olmayan harita türleri.
Bu seçeneklerin her biri, MapType
arayüzünü uygulayan bir sınıf oluşturulmasına dayanır. Ayrıca,
ImageMapType
sınıfı, görüntü harita türlerinin oluşturulmasını basitleştirmek için bazı yerleşik davranışlar da sunar.
MapType
Arayüzü
MapType
yöntemini uygulayan sınıflar oluşturmadan önce, Google Haritalar'ın koordinatları ve haritanın hangi bölümlerinin gösterileceğine nasıl karar verdiğini anlamanız önemlidir. Tüm temel veya bindirme harita türleri için benzer bir mantık uygulamanız gerekir.
Harita ve döşeme koordinatları ile ilgili kılavuzu okuyun.
Özel harita türleri MapType
arayüzünü uygulamalıdır. Bu arayüz, API'nin mevcut görüntü alanı ve yakınlaştırma düzeyinde harita desenleri görüntülemesi gerektiğini belirlediğinde API'nin harita türlerinize istekler başlatmasına olanak tanıyan belirli özellikleri ve yöntemleri belirtir. Hangi kartın yükleneceğine karar vermek için bu istekleri yönetirsiniz.
Not: Bu arayüzü uygulamak için kendi sınıfınızı oluşturabilirsiniz. Alternatif olarak, uyumlu görüntüleriniz varsa hâlihazırda bu arayüzün uygulandığı
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
(gerekli), döşemenin boyutunu belirtir (google.maps.Size
türünde). Boyutlar kare şeklinde olmamalarına rağmen dikdörtgen olmalı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ünün parçasının gösterileceği minimum yakınlaştırma düzeyini belirtir. Varsayılan olarak bu değer, minimum yakınlaştırma düzeyinin olmadığını gösteren0
değeridir.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ü içinde seçilebilmesini istiyorsanız gereklidir. (AşağıdakiMapType
Denetim Ekleme bölümüne bakın.)alt
(isteğe bağlı), bu harita türü için alternatif metni belirtir ve fareyle üzerine gelindiğinde gösterilen metin olarak gösterilir. Bu özellik, yalnızca bu harita türünün bir MapType kontrolü içinde seçilebilmesini istiyorsanız gereklidir. (AşağıdakiMapType
Denetim Ekleme bölümüne bakın.)
Ayrıca, MapType
arayüzünü uygulayan sınıfların aşağıdaki yöntemleri uygulaması gerekir:
-
API, haritanın belirtilen görüntü alanı için yeni karolar göstermesi 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
tileSize
,minZoom
vemaxZoom
özelliklerine ve haritanın mevcut görüntü alanı ile yakınlaştırma düzeyine göregetTile()
çağırmasının gerekip gerekmediğini belirler. Bu yöntemin işleyicisi, iletilen koordinat, yakınlaştırma düzeyi ve parça resminin ekleneceği DOM öğesi için 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 ek olarak harita parçalarına eklenmiş tüm öğeleri kaldırmanız gerekir. Örneğin, harita karo 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 diğer harita türleriyle bindirme olarak birleştirilebilir. Bağımsız harita türleri, temel harita türleri olarak bilinir. API'nin bu özel MapType
'leri diğer mevcut temel harita türlerinde (ROADMAP
, TERRAIN
vb.) olduğu gibi işlemesini isteyebilirsiniz. Bunu yapmak için özel MapType
öğenizi Map
öğesinin mapTypes
mülküne ekleyin. Bu özelliğin türü
MapTypeRegistry
.
Aşağıdaki kod, bir haritanın karo koordinatlarını görüntülemek için bir temel MapType
oluşturur ve karoların dış çizgisini ç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
Yer Paylaşımlı Harita Türleri
Bazı harita türleri, mevcut harita türlerinin üzerinde çalışacak şekilde tasarlanmıştır. Bu tür harita türleri, önemli yerleri belirten veya kullanıcıya ek veriler gösteren şeffaf katmanlara sahip olabilir.
Bu durumlarda, harita türünün ayrı bir varlık olarak değil, bindirme olarak değerlendirilmesini istersiniz.
Bunu, harita türünü doğrudan Map
öğesinin overlayMapTypes
özelliğini kullanıp mevcut bir MapType
öğesine ekleyerek yapabilirsiniz. Bu özellik, MapType
içeren MVCArray
içeriyor. Tüm harita türleri (temel ve bindirme) mapPane
katmanında oluşturulur. Yer paylaşımlı harita türleri, ekli 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 üzerinde MapType
bir karo yer paylaşımı oluşturmamız haricinde bir ö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 işlev görmek için MapType
uygulamak zaman alan ve emek isteyen bir iş olabilir. API, en yaygın harita türleri olan, 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 ImageMapType
sınıfı, aşağıdaki gerekli özellikleri tanımlayan bir ImageMapTypeOptions
nesne spesifikasyonu kullanılarak oluşturulur:
tileSize
(gerekli), döşemenin boyutunu belirtir (google.maps.Size
türünde). Boyutlar kare şeklinde olmamalarına rağmen dikdörtgen olmalıdır.getTileUrl
(zorunlu), sağlanan dünya koordinatlarına ve yakınlaştırma düzeyine göre uygun resim parçasının seçimini işlemek için genellikle satır içi işlev değişmez değeri olarak sunulan işlevi belirtir.
Aşağıdaki kod, Google'ın ay karolarını kullanarak temel bir ImageMapType
uygular. Örnekte, karoların haritanızın y ekseninde değil, x ekseninde tekrarlanmasını sağlamak için bir normalleştirme işlevi kullanılmıştı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üredir (yaklaşık olarak); harita ise düz, iki boyutlu bir yüzeydir. Maps JavaScript API'de gördüğünüz harita, Dünya'nın herhangi bir düz haritası gibi, o kürenin düz bir yüzey üzerindeki projeksiyonudur. En basit şekilde ifade etmek gerekirse projeksiyon, enlem/boylam değerlerinin projeksiyon haritası üzerinde koordinatlarla eşlenmesi olarak tanımlanabilir.
Maps JavaScript API'deki tahminler Projection
arayüzünü uygulamalıdır. Projection
uygulaması, bir koordinat sisteminden diğerine eşlemenin yanı sıra iki yönlü bir eşleme sağlamalıdır. Yani,
Earth koordinatlarından (LatLng
nesneler) Projection
sınıfındaki 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 projeksiyonu kullanır. Bu projeksiyonu, Map
üzerinde getProjection()
(veya standart MapType
türlerinden herhangi birinde) çağırarak elde edebilirsiniz. Çoğu kullanım için bu standart Projection
yeterli olur ama kendi özel projeksiyonlarınızı da tanımlayıp kullanabilirsiniz.
Projeksiyonu Uygulama
Özel bir projeksiyon uygularken birkaç şeyi tanımlamanız gerekir:
- Enlem ve boylam koordinatlarını Kartezyen düzlemde (veya tersi) eşlemeye yönelik formüller. (
Projection
arayüzü yalnızca doğrusal koordinatlara dönüştürme işlemleri destekler.) - Taban karo boyutu. Tüm karolar dikdörtgen olmalıdır.
- Yakınlaştırma düzeyi 0 olarak ayarlanmış temel karoyu kullanan bir haritanın "dünya boyutu". Yakınlaştırma seviyesi 0 olan bir bloktan oluşan haritalarda dünya boyutunun ve temel karo boyutunun aynı olduğunu unutmayın.
Projeksiyonlardaki Dönüşümleri Koordine Etme
Her projeksiyon, bu iki koordinat sistemi arasında çeviri yapan iki yöntem sağlayarak coğrafi ve dünya koordinatları arasında dönüşüm yapmanızı sağlar:
Projection.fromLatLngToPoint()
yöntemi,LatLng
değerini dünya koordinatına dönüştürür. Bu yöntem, bindirmeleri haritaya konumlandırmak (ve haritayı 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 projeksiyonu iki durum için kullanabilirsiniz: dünya haritası oluşturmak veya bir yerel bölgenin haritasını oluşturmak için. İlk durumda, projeksiyonunuzun tüm boylamlarda doğrusal ve normal olduğundan da emin olmanız gerekir. Bazı projeksiyonlar (özellikle konik projeksiyonlar) "yerel olarak normal" (yani kuzeyi işaret eden) olabilir, ancak gerçek kuzeyden sapma gösterebilir. Örneğin, harita bazı referans boylama göre ne kadar uzak konumlandırılır. Böyle bir projeksiyonu yerel olarak kullanabilirsiniz ancak projeksiyonun her zaman tam olarak doğru olmadığını ve dönüşüm hatalarının, saptığınız referans boylamından ne kadar uzaklaştıkça giderek daha belirgin hale geleceğini unutmayın.
Projeksiyonlarda Harita Bölümü Seçimi
Projeksiyonlar sadece konumların veya bindirmelerin konumlarını belirlemekte değil, aynı zamanda harita parçalarını konumlandırmak için de yararlıdır.
Maps JavaScript API, temel haritaları bir MapType
arayüzü kullanarak oluşturur. Bu arayüz, hem haritanın projeksiyonunu tanımlamak için projection
özelliği hem de parça koordinatı değerlerine göre harita desenleri almak için getTile()
yöntemi beyan etmelidir. Karo koordinatları, hem temel karo boyutuna (dikdörtgen olmalıdır) hem de haritanızın "dünya boyutuna" (yakınlaştırma düzeyinde 0, harita dünyanızın piksel boyutu) dayanır. (Yakınlaştırma düzeyi 0 olduğunda tek bir bloktan oluşan haritalarda 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, iletilen bu değerlere bağlı olduğundan map_zoom_tileX_tileY.png
gibi iletilen bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak faydalıdır.
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"), 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;