Google Haritalar Veri katmanı, rastgele coğrafi veriler için bir kapsayıcı sağlar. Özel verilerinizi depolamak veya GeoJSON verilerini bir Google haritasında görüntülemek için Veri katmanını 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, poligon ve poligon olarak oluşturur. Bu özellikleri normal bir yer paylaşımı gibi biçimlendirebilir veya veri kümenizdeki diğer özelliklere dayalı olarak stil kuralları uygulayabilirsiniz.
google.maps.Data sınıfı şunları yapmanıza olanak tanır:
- Haritanıza poligonlar çizin.
- Haritanıza GeoJSON verileri ekleyin.
GeoJSON, internetteki coğrafi mekansal veriler için bir standarttır.Datasınıfı, veri temsilinde GeoJSON yapısına uyar ve GeoJSON verilerinin gösterilmesini kolaylaştırır. GeoJSON verilerini ve görüntü noktalarını, çizgi dizelerini ve poligonları kolayca içe aktarmak içinloadGeoJson()yöntemini kullanın. - İsteğe bağlı verileri modellemek için
google.maps.Datakullanın.
Gerçek hayattaki çoğu tüzel kişiyle ilişkili başka mülkler de vardır. Örneğin, mağazaların çalışma saatleri, yolların trafik hızı ve Kız Çocuk Rehberleri'nin çerez satışı yapan çimleri var.google.maps.Dataile bu özellikleri modelleyebilir ve verilerinize uygun şekilde stil oluşturabilirsiniz. - Verilerinizin nasıl gösterileceğini seçin ve anında fikrinizi değiştirin.
Veri katmanı, verilerinizin görselleştirilmesi ve etkileşimiyle 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ı poligonu sizin yerinize yönetir. Enlem/boylam koordinatları olarak tanımlanmış bir veya daha fazla doğrusal halkadan oluşan bir dizi ekleyebilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halkayı geçirirseniz ikinci ve sonraki doğrusal halkalar, poligondaki iç yolları (delikleri) tanımlamak için kullanılır.
Aşağıdaki örnekte iki delikli bir dikdörtgen poligon oluşturulur:
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 },
{ lat: -35.364, lng: 153.207 },
{ lat: -35.364, lng: 158.207 },
{ 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 dosyasını yükle
GeoJSON, internette coğrafi veri paylaşımı için kullanılan yaygın bir standarttır. Hafiftir ve kolayca okunabilir, bu da paylaşma ve ortak çalışma için idealdir. Veri katmanı sayesinde, tek bir kod satırındaki Google haritasına GeoJSON verilerini ekleyebilirsiniz.
map.data.loadGeoJson('google.json');
Her haritanın, GeoJSON'ı içeren rastgele coğrafi veriler için bir veri katmanı görevi gören bir map.data nesnesi vardır. data nesnesinin loadGeoJSON() yöntemini çağırarak bir GeoJSON dosyasını yükleyip görüntüleyebilirsiniz. Aşağıdaki örnekte, eşlemenin 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
GeoJSON Örneği
Bu sayfadaki örneklerin çoğu ortak bir GeoJSON dosyası kullanır. Bu dosya Avustralya'da çokgen olarak "Google"daki altı karakteri tanımlar. Veri katmanını test ederken bu dosyayı kopyalayabilir veya değiştirebilirsiniz.
Not: Başka bir alandan json dosyası yükleyebilmek için o alanda Kaynaklar arası kaynak paylaşımı etkinleştirilmiş olmalıdır.
Dosyanın tam metni aşağıda google.json kelimelerinin yanındaki küçük ok genişletilerek 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 Stili
Verilerinizin nasıl görüneceğini belirtmek için Data.setStyle() yöntemini kullanın. setStyle() yöntemi, bir StyleOptions nesne sabiti veya her özellik için stili hesaplayan bir işlev alır.
Basit stil kuralları
Özelliklerin stilini belirlemenin en basit yolu setStyle() öğesine bir StyleOptions nesnesi öğesi aktarmaktır. 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şturabileceğini unutmayın. Bu, farklı özellik türlerinin stillerini tek bir nesne değişmez değerinde birleştirebileceğiniz anlamına gelir. Örneğin, aşağıdaki snippet hem nokta geometrilerini etkileyen bir özel icon hem de yalnızca çokgenleri etkileyen fillColor değerini ayarlar.
map.data.setStyle({
icon: '//example.com/path/to/image.png',
fillColor: 'green'
});
Geçerli stil/özellik kombinasyonları hakkında daha fazla bilgiyi Stil Seçenekleri'nde bulabilirsiniz.
Aşağıda, bir StyleOptions nesne değişmez değeri kullanarak çeşitli özellikler için fırça ve dolgu rengini ayarlama örneği verilmiştir. Her bir 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 amaçlı stil kuralları
İşaretçiler veya çoklu çizgiler gibi çok sayıda bindirmenin stilini güncellemek istiyorsanız, genellikle haritanızdaki her bir bindirmeyi tekrarlamanız ve stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı ile kuralları bildirimli olarak ayarlayabilirsiniz. Bu kurallar, tüm veri kümenize uygulanır. Veriler veya kurallar güncellendiğinde stil, her özelliğe otomatik olarak uygulanır. Stilini özelleştirmek için bir özellik kullanabilirsiniz.
Örneğin, aşağıdaki kod Ascii karakter kümesindeki konumunu inceleyerek google.json içindeki her karakterin rengini belirler. Bu örnekte, karakterimiz ile verilerimizi 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 bir boş 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 özelliğinin 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 isteyebilirsiniz. Örneğin, tıklama sırasında bir özelliği vurgulamak için.
Özel stil kuralları uygulamak için overrideStyle() yöntemini kullanın. overrideStyle() yöntemiyle değiştirdiğiniz özellikler, setStyle() içinde belirtilmiş olan genel stillere ek olarak uygulanır. Örneğin aşağıdaki kod, bir poligonun tıklama rengini değiştirir ancak diğer stilleri 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 ayarlama seçenekleri, özellik türüne bağlıdır.
Örneğin, fillColor yalnızca poligon geometrilerinde oluşturulacaktır. icon ise yalnızca nokta geometrisinde görünecektir. Daha fazla bilgiyi StyleOptions için referans belgelerde bulabilirsiniz.
Tüm geometrilerde kullanılabilir
clickable:trueise özellik fare ve dokunma etkinliklerini alırvisible:trueise özellik gösterilir.zIndex: Tüm özellikler,zIndexsırasına göre haritada gösterilir. Daha yüksek değerler, daha düşük değerlere sahip özelliklerin önünde gösterilir. İşaretçiler her zaman satır dizelerinin ve poligonların önünde gösterilir.
Nokta geometrilerinde kullanılabilir
cursor: Fareyle üzerine gelindiğinde gösterilecek imleci.icon: Nokta geometrisi için gösterilecek simge.shape: İsabet algılama için kullanılan resim eşlemesini tanımlar.title: Fareyle üzerine gelindiğinde görünen metin.
Çizgi geometriklerinde 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 bir fırça opaklığıdır.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ındaki 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 bir fırça opaklığıdır.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şimde bulunmasını sağlamak için etkinlik işleyiciler ekleyebilirsiniz. Aşağıdaki örnekte, özellikle ilgili bilgileri fare imlecinin altında gösteren bir fareyle üzerine gelme etkinliği ekledik.
// 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 özellikler için ortaktır:
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
Bu etkinlikler hakkında daha fazla bilgiyi google.maps.data sınıfının referans dokümanlarında bulabilirsiniz.
Görünümü Dinamik Olarak Değiştir
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 eklenir. Özellik stili, özellik ayarlanır oluşturulmaz 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();
});