Google Haritalar Veri katmanı, rastgele coğrafi veriler için bir kapsayıcı sağlar. Veri katmanını özel verilerinizi depolamak veya GeoJSON verilerini bir Google haritasında görüntülemek için kullanabilirsiniz.
Genel bakış
Veri Katmanı hakkında daha fazla bilgi edinmek için bu DevBytes videosunu izleyin.
Maps JavaScript API ile bir haritayı işaretçiler, çoklu çizgiler, poligonlar gibi çeşitli yer paylaşımlarıyla işaretleyebilirsiniz. Bu ek açıklamaların her biri, stil bilgilerini konum verileriyle birleştirir. google.maps.Data sınıfı, rastgele coğrafi veriler için bir kapsayıcıdır. Bu yer paylaşımlarını eklemek yerine, haritanıza rastgele coğrafi veriler eklemek için Veri katmanını kullanabilirsiniz. Bu veriler noktalar, çizgiler veya poligonlar gibi geometriler içeriyorsa API, bunları varsayılan olarak işaretçi, çoklu çizgi ve poligon olarak oluşturur. Bu özelliklerin stilini, normal bir bindirme gibi ayarlayabilir veya veri kümenizde bulunan diğer özelliklere dayalı olarak stil kuralları uygulayabilirsiniz.
google.maps.Data sınıfıyla yapabilecekleriniz:
- Haritanızda poligonlar çizin.
- Haritanıza GeoJSON verileri ekleyin.
GeoJSON, internetteki coğrafi veriler için bir standarttır.Datasınıfı, veri gösterimi açısından GeoJSON yapısını kullanır ve GeoJSON verilerinin görüntülenmesini kolaylaştırır. GeoJSON verilerini kolayca içe aktarmak ve noktaları, çizgi dizelerini ve poligonları görüntülemek içinloadGeoJson()yöntemini kullanın. - Rastgele verileri modellemek için
google.maps.Datakullanın.
Gerçek varlıkların çoğu, kendileriyle ilişkilendirilmiş başka mülklere sahiptir. Örneğin, mağazaların çalışma saatleri, yolların trafik hızı vardır ve her Kız Rehber grubu kurabiye satan çimlere sahiptir.google.maps.Dataile bu özellikleri modelleyebilir ve verilerinizin stilini buna göre belirleyebilirsiniz. - Verilerinizin nasıl temsil edileceğini seçin ve anında fikrinizi değiştirin.
Veri katmanı, verilerinizin görselleştirilmesi ve etkileşimi ile ilgili kararlar almanıza olanak tanır. Örneğin, marketlerin haritasına bakarken yalnızca toplu taşıma bileti satan mağazaları görüntülemeyi seçebilirsiniz.
Çokgen çizin
Data.Polygon sınıfı, poligon sarmalama işlemini sizin yerinize yapar. Bu satıra, enlem/boylam koordinatları olarak tanımlanan bir veya daha fazla doğrusal halkadan oluşan bir dizi aktarabilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halka geçerseniz poligondaki iç yolları (delikler) tanımlamak için ikinci ve izleyen doğrusal halkalar kullanılır.
Aşağıdaki örnek, içinde iki delik olan bir dikdörtgen poligon oluşturur:
TypeScript
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 6,
center: { lat: -33.872, lng: 151.252 },
}
);
// Define the LatLng coordinates for the outer path.
const outerCoords = [
{ lat: -32.364, lng: 153.207 }, // north west
{ lat: -35.364, lng: 153.207 }, // south west
{ lat: -35.364, lng: 158.207 }, // south east
{ lat: -32.364, lng: 158.207 }, // north east
];
// Define the LatLng coordinates for an inner path.
const innerCoords1 = [
{ lat: -33.364, lng: 154.207 },
{ lat: -34.364, lng: 154.207 },
{ lat: -34.364, lng: 155.207 },
{ lat: -33.364, lng: 155.207 },
];
// Define the LatLng coordinates for another inner path.
const innerCoords2 = [
{ lat: -33.364, lng: 156.207 },
{ lat: -34.364, lng: 156.207 },
{ lat: -34.364, lng: 157.207 },
{ lat: -33.364, lng: 157.207 },
];
map.data.add({
geometry: new google.maps.Data.Polygon([
outerCoords,
innerCoords1,
innerCoords2,
]),
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: { lat: -33.872, lng: 151.252 },
});
// Define the LatLng coordinates for the outer path.
const outerCoords = [
{ lat: -32.364, lng: 153.207 }, // north west
{ lat: -35.364, lng: 153.207 }, // south west
{ lat: -35.364, lng: 158.207 }, // south east
{ lat: -32.364, lng: 158.207 }, // north east
];
// Define the LatLng coordinates for an inner path.
const innerCoords1 = [
{ lat: -33.364, lng: 154.207 },
{ lat: -34.364, lng: 154.207 },
{ lat: -34.364, lng: 155.207 },
{ lat: -33.364, lng: 155.207 },
];
// Define the LatLng coordinates for another inner path.
const innerCoords2 = [
{ lat: -33.364, lng: 156.207 },
{ lat: -34.364, lng: 156.207 },
{ lat: -34.364, lng: 157.207 },
{ lat: -33.364, lng: 157.207 },
];
map.data.add({
geometry: new google.maps.Data.Polygon([
outerCoords,
innerCoords1,
innerCoords2,
]),
});
}
window.initMap = initMap;
GeoJSON'u yükle
GeoJSON, coğrafi verilerin internette paylaşılması için yaygın olarak kullanılan bir standarttır. Hafif olduğundan ve kolayca okunabilir olduğundan, paylaşım ve ortak çalışma için idealdir. Veri katmanı sayesinde, GeoJSON verilerini yalnızca bir Google haritasına tek bir kod satırıyla ekleyebilirsiniz.
map.data.loadGeoJson('google.json');
Her haritada GeoJSON dahil olmak üzere rastgele coğrafi veriler için veri katmanı görevi gören bir map.data nesnesi bulunur. data nesnesinin loadGeoJSON() yöntemini çağırarak bir GeoJSON dosyası yükleyebilir ve görüntüleyebilirsiniz. Aşağıdaki örnekte bir haritanın nasıl ekleneceği ve harici GeoJSON verilerinin nasıl yükleneceği gösterilmektedir.
TypeScript
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json"
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: -28, lng: 137 },
});
// NOTE: This uses cross-domain XHR, and may not work on older browsers.
map.data.loadGeoJson(
"https://storage.googleapis.com/mapsdevsite/json/google.json",
);
}
window.initMap = initMap;
Örneği Deneyin
Örnek GeoJSON
Bu sayfadaki örneklerin çoğunda yaygın bir GeoJSON dosyası kullanılmaktadır. Bu dosya, "Google"daki altı karakteri Avustralya üzerinde poligon olarak tanımlar. Veri katmanını test ederken bu dosyayı kopyalayabilir veya değiştirebilirsiniz.
Not: Başka bir alandan json dosyası yükleyebilmeniz için söz konusu alanın Kaynaklar arası kaynak paylaşımı etkinleştirmiş olması gerekir.
Aşağıda google.json kelimelerinin yanındaki küçük ok genişletilerek dosyanın tam metni görülebilir.
google.json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
[118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
[121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
[124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
[121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
[122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
[120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
[123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
[127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
[126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
[129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
],
[
[128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
[127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
[131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
[134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
[132.71, -25.64], [131.87, -25.76]
],
[
[133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
[132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
[135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
[137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
[136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
[137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
[139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
[138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
],
[
[137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
[136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
[145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
[142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
[145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
[144.31, -28.26], [144.14, -27.41]
],
[
[144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
[145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
]
]
}
}
]
}
GeoJSON Verilerinin Stilini Belirleme
Verilerinizin nasıl görünmesi gerektiğini belirtmek için Data.setStyle() yöntemini kullanın. setStyle() yöntemi, bir StyleOptions nesne değişmez değerini veya her özellik için stili hesaplayan bir işlev alır.
Basit stil kuralları
Özelliklerin stilini belirlemenin en basit yolu, StyleOptions nesnesini değişmez değerini setStyle() öğesine iletmektir. Bu işlem, koleksiyonunuzdaki her özellik için tek bir stil belirler. Her özellik türünün, kullanılabilir seçeneklerin yalnızca bir alt kümesini oluşturabildiğini unutmayın. Bu, farklı özellik türlerine yönelik stillerin tek bir nesnede birleştirilmesinin mümkün olduğu anlamına gelir. Örneğin, aşağıdaki snippet hem yalnızca nokta geometrilerini etkileyen bir özel icon hem de yalnızca poligonları etkileyen fillColor özelliğini ayarlar.
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: 'green'
});
Geçerli stil/özellik kombinasyonları hakkında daha fazla bilgi için Stil Seçenekleri bölümüne bakın.
Aşağıda, bir StyleOptions nesnesi değişmez değeri kullanarak çeşitli özellikler için fırça ve dolgu rengini ayarlama örneği verilmiştir. Her poligonun stilinin aynı
olduğuna dikkat edin.
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
fillColor: 'green',
strokeWeight: 1
});
Bildirim temelli stil kuralları
İşaretçiler veya çoklu çizgiler gibi çok sayıda yer paylaşımının stilini güncellemek istiyorsanız, genelde haritanızdaki her bir bindirmeyi yinelemeniz ve stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı ile kuralları bildirimli olarak ayarlayabilirsiniz. Bu kurallar, veri kümenizin tamamına uygulanır. Veriler veya kurallar güncellendiğinde stil, her özelliğe otomatik olarak uygulanır. Stilini özelleştirmek için özellik özelliklerini kullanabilirsiniz.
Örneğin, aşağıdaki kod, ASCII karakter kümesindeki konumunu inceleyerek google.json uygulamamızdaki her bir karakterin rengini belirler. Bu örnekte, karakter konumunu verilerimizle birlikte kodladık.
// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
var ascii = feature.getProperty('ascii');
var color = ascii > 91 ? 'red' : 'blue';
return {
fillColor: color,
strokeWeight: 1
};
});
Stilleri kaldır
Uygulanan stilleri kaldırmak isterseniz setStyles() yöntemine boş bir nesne değişmez değeri iletin.
// Remove custom styles.
map.data.setStyle({});
Bu işlem, belirttiğiniz tüm özel stilleri kaldırır ve özellikler, varsayılan stiller kullanılarak oluşturulur. Özellikleri artık oluşturmak istemiyorsanız StyleOptions öğesinin visible özelliğini false olarak ayarlayın.
// Hide the Data layer.
map.data.setStyle({visible: false});
Varsayılan stilleri geçersiz kıl
Stil kuralları genellikle Veri katmanındaki her özelliğe uygulanır. Bununla birlikte, belirli özelliklere özel stil kuralları uygulamak istediğiniz durumlar olabilir. Örneğin, tıklandığında bir özelliği vurgulamanın yolu olarak.
Özel stil kuralları uygulamak için overrideStyle() yöntemini kullanın. overrideStyle() yöntemiyle değiştirdiğiniz tüm özellikler, setStyle() politikasında önceden belirtilen genel stillere ek olarak uygulanır. Örneğin, aşağıdaki kod tıklandığında, bir poligonun dolgu rengini değiştirir ancak başka stil ayarlamaz.
// Set the global styles.
map.data.setStyle({
fillColor: 'green',
strokeWeight: 3
});
// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
map.data.overrideStyle(event.feature, {fillColor: 'red'});
});
Tüm stil geçersiz kılmalarını kaldırmak için revertStyle() yöntemini çağırın.
Stil seçenekleri
Her bir özelliğin stilini belirlemek için kullanılabilecek seçenekler, özellik türüne bağlıdır.
Örneğin, fillColor yalnızca poligon geometrilerinde oluşturulurken icon yalnızca nokta geometrisinde görünür. StyleOptions referans belgelerinden daha fazla bilgi edinebilirsiniz.
Tüm geometrilerde kullanılabilir
clickable:trueise bu özellik fare ve dokunma etkinlikleri alırvisible:trueise özellik görünür durumdadır.zIndex: Tüm özellikler haritadazIndexsırasına göre gösterilir. Daha yüksek değerler, daha düşük değerlere sahip özelliklerin önünde gösterilir. İşaretçiler her zaman çizgi dizelerinin ve poligonların önünde görüntülenir.
Nokta geometrilerinde kullanılabilir
cursor: Fareyle üzerine gelindiğinde gösterilecek fare imleci.icon: Nokta geometrisi için gösterilecek simge.shape: İsabet algılama için kullanılan resim haritasını tanımlar.title: Fareyle üzerine gelindiğinde gösterilen metin.
Çizgi geometrilerinde kullanılabilir
strokeColor: Fırça rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.strokeOpacity: 0,0 ile 1,0 arasında fırça opaklığı.strokeWeight: Piksel cinsinden fırça genişliği.
Poligon geometrilerinde kullanılabilir
fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.fillOpacity:0.0ile1.0.arasında dolgu opaklığıstrokeColor: Fırça rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.strokeOpacity: 0,0 ile 1,0 arasında fırça opaklığı.strokeWeight: Piksel cinsinden fırça genişliği.
Etkinlik İşleyicileri Ekle
Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Kullanıcıların haritadaki verilerle etkileşim kurmasına izin vermek için etkinlik işleyiciler ekleyebilirsiniz. Aşağıdaki örnekte, fare imlecinin altında özellikle ilgili bilgileri görüntüleyen bir fareyle üzerine gelme etkinliği ekliyoruz.
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});
Veri katmanı etkinlikleri
Aşağıdaki etkinlikler, geometri türlerinden bağımsız olarak tüm özelliklerde ortaktır:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
Bu etkinlikler hakkında daha fazla bilgiye google.maps.data sınıfının referans belgelerinden ulaşabilirsiniz.
Görünümü Dinamik Olarak Değiştirme
Her özelliğin stilini hesaplayan bir işlevi google.maps.data.setStyle() yöntemine geçirerek Veri katmanının stilini ayarlayabilirsiniz. Bu işlev, bir özelliğin özellikleri her güncellendiğinde çağrılır.
Aşağıdaki örnekte, özelliğin isColorful özelliğini güncelleyen click etkinliği için bir etkinlik işleyici ekledik. Özellik stili, özellik ayarlanır ayarlanmaz
değişikliği yansıtacak şekilde güncellenir.
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
return /** @type {!google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});