Veri Katmanı

Platform seçin: Android iOS JavaScript

Google Haritalar Verileri 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.

Haritalar JavaScript API ile bir haritayı işaretçi, çoklu çizgi, poligon vb. 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 istediğiniz coğrafi verileri 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 özelliklere normal bir yer paylaşımı gibi stil uygulayabilir veya veri kümenizdeki diğer özelliklere göre stil kuralları uygulayabilirsiniz.

google.maps.Data sınıfı şunları yapmanıza olanak tanır:

  • Haritanızda poligon çizin.
  • Haritanıza GeoJSON verileri ekleyin.
    GeoJSON, internetteki coğrafi veriler için bir standarttır. Data sınıfı, veri temsilinde GeoJSON yapısını takip eder ve GeoJSON verilerini göstermeyi kolaylaştırır. GeoJSON verilerini kolayca içe aktarmak ve noktaları, çizgileri ve poligonları görüntülemek için loadGeoJson() yöntemini kullanın.
  • Arızi verileri modellemek için google.maps.Data kullanın.
    Gerçek dünyadaki çoğu öğenin ilişkili başka özellikleri vardır. Örneğin, mağazaların çalışma saatleri, yolların trafik hızları ve her Kız Guides grubunun kurabiye satış alanı vardır. google.maps.Data ile bu özellikleri modelleyebilir ve verilerinize uygun şekilde stil uygulayabilirsiniz.
  • Verilerinizin nasıl temsil edileceğini seçin ve istediğiniz zaman fikrinizi değiştirin.
    Veri katmanı, verilerinizin görselleştirilmesi ve etkileşimi hakkında karar vermenizi sağlar. Örneğin, bir market haritasına bakarken yalnızca toplu taşıma bileti satan marketleri görüntülemeyi seçebilirsiniz.

Poligon çizme

Data.Polygon sınıfı, poligon sarma işlemini sizin için yapar. Bu işleve, enlem/boylam koordinatları olarak tanımlanan bir veya daha fazla doğrusal halka dizisi iletebilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halka gönderirseniz ikinci ve sonraki doğrusal halkalar, poligondaki iç yolları (delikler) tanımlamak için kullanılır.

Aşağıdaki örnekte, içinde iki delik bulunan dikdörtgen bir çokgen oluşturulmaktadır:

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;
index.ts

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;
index.js

GeoJSON'i yükleme

GeoJSON, coğrafi verileri internette paylaşmak için yaygın olarak kullanılan bir standarttır. Hafif ve kolay okunur olması, bu dosyayı paylaşım ve ortak çalışma için ideal kılar. Veri katmanı sayesinde, yalnızca bir kod satırı kullanarak bir Google haritasına GeoJSON verileri ekleyebilirsiniz.

map.data.loadGeoJson('google.json');

Her haritanın, GeoJSON dahil olmak üzere rastgele coğrafi veriler için veri katmanı işlevi 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, harita ekleme ve harici GeoJSON verilerini yükleme işlemleri 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;
index.ts

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;
index.js
Örneği görüntüleyin

Örneği Deneyin

Örnek GeoJSON

Bu sayfadaki örneklerin çoğunda ortak bir GeoJSON dosyası kullanılır. Bu dosya, "Google"daki altı karakteri Avustralya'daki poligonlar olarak tanımlar. Veri katmanını test ederken bu dosyayı kopyalayabilir veya değiştirebilirsiniz.

Not: Başka bir alandan JSON dosyası yüklemek için ilgili alanda kaynakların alan adları arasında paylaşılması özelliğinin etkinleştirilmiş olması gerekir.

Dosyanın tam metnini, google.json kelimelerinin yanındaki küçük oku genişleterek aşağıda görebilirsiniz.

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 verilerini biçimlendirme

Verilerinizin nasıl görünmesi gerektiğini belirtmek için Data.setStyle() yöntemini kullanın. setStyle() yöntemi, bir StyleOptions obje değişmezi veya her bir özelliğin stilini hesaplayan bir işlev alır.

Basit stil kuralları

Özelliklere stil uygulamanın en basit yolu, StyleOptions nesne değişmezini setStyle()'e iletmektir. Bu işlem, koleksiyonunuzdaki her bir özellik için tek bir stil ayarlar. Her özellik türünün yalnızca mevcut seçeneklerin bir alt kümesini oluşturabileceğini unutmayın. Bu, farklı özellik türlerine ait stilleri tek bir nesne değişmez ifadesinde birleştirebileceğiniz anlamına gelir. Örneğin, aşağıdaki snippet hem yalnızca nokta geometrilerini etkileyen özel bir icon hem de yalnızca poligonları etkileyen fillColor 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 bölümünde bulabilirsiniz.

Aşağıda, StyleOptions nesne değişmezi kullanılarak çeşitli özellikler için çizgi ve dolgu renginin ayarlanmasına dair bir örnek verilmiştir. Her poligonun aynı şekilde biçimlendirildiğine dikkat edin.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Beyan tarzı stil kuralları

İşaretçi veya çoklu çizgi gibi çok sayıda yer paylaşımının stilini güncellemek istiyorsanız genellikle haritanızdaki her yer paylaşımını tek tek incelemeniz ve stilini ayrı ayrı ayarlamanız gerekir. Veri katmanında, kuralları açık bir şekilde belirleyebilirsiniz. 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 google.json'teki her bir karakterin rengini, ascii karakter kümesindeki konumunu inceleyerek ayarlar. 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ırma

Uygulanan tüm stilleri kaldırmak istiyorsanız setStyles() yöntemine boş bir nesne değişmezi gönderin.

// 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. Bunun yerine ö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ılma

Stil kuralları genellikle Veri katmanındaki her özelliğe uygulanır. Ancak belirli özelliklere özel stil kuralları uygulamak istediğiniz durumlar da vardır. Örneğin, tıklandığı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 tüm özellikler, setStyle() içinde ö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 stiller 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 stili için kullanılabilen 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. Daha fazla bilgi için StyleOptions ile ilgili referans dokümanlarını inceleyin.

Tüm geometrilerde kullanılabilir

  • clickable: true ise özellik fare ve dokunma etkinlikleri alır
  • visible: true ise özellik görünür.
  • zIndex: Tüm özellikler haritada zIndex değerlerine göre sıralanır. Daha yüksek değerler, daha düşük değerlere sahip özelliklerin önünde gösterilir. İşaretçiler her zaman çizgi dizilerinin ve poligonların önünde gösterilir.

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örünen metin.

Doğrusal geometrilerde kullanılabilir

  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: 0,0 ile 1,0 arasında değişen çizgi opaklığı.
  • strokeWeight: Piksel cinsinden çizgi kalınlığı.

Poligon geometrilerinde kullanılabilir

  • fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • fillOpacity: 0.0 ile 1.0. arasında dolgu opaklığı
  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: 0,0 ile 1,0 arasında değişen çizgi opaklığı.
  • strokeWeight: Piksel cinsinden çizgi kalınlığı.

Etkinlik işleyicileri ekleme

Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Kullanıcıların haritadaki verilerle etkileşime girmesine izin vermek için etkinlik dinleyicileri ekleyebilirsiniz. Aşağıdaki örnekte, fare imlecinin altında özellikle ilgili bilgileri gösteren 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:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Bu etkinlikler hakkında daha fazla bilgiyi google.maps.data sınıfının referans belgelerinde bulabilirsiniz.

Görünümü dinamik olarak değiştirme

Her bir özelliğin stilini hesaplayan bir işlevi google.maps.data.setStyle() yöntemine ileterek 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 ekliyoruz. Özellik stili, mülk ayarlandıktan sonra 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();
});