Veri Katmanı

Platform seçin: Android iOS JavaScript

Google Haritalar Veri katmanı, isteğe bağlı 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 için bu DevBytes videosunu izleyin.

Maps JavaScript API ile bir haritayı işaretçiler, çoklu çizgiler, poligonlar vb. gibi çeşitli bindirmelerle işaretleyebilirsiniz. Bu ek açıklamaların her biri stil bilgilerini konum verileriyle birleştirir. google.maps.Data sınıfı, rastgele coğrafi veri kapsayıcısıdır. Bu bindirmeleri 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 özellikleri temel alarak stil kuralları uygulayabilirsiniz.

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

  • Haritanıza 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 verilerinin görüntülenmesini kolaylaştırır. GeoJSON verilerini ve görüntüleme noktalarını, çizgi-dizeleri ve poligonları kolayca içe aktarmak için loadGeoJson() yöntemini kullanın.
  • İsteğe bağlı verileri modellemek için google.maps.Data kullanın.
    Gerçek hayatta ç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 her bir Kız Rehberinde çim çerezlerin satışı yapılıyor. google.maps.Data ile bu özellikleri modelleyebilir ve verilerinizi buna göre biçimlendirebilirsiniz.
  • Verilerinizin nasıl temsil edileceğini seçin ve anında fikrinizi değiştirin.
    Veri katmanı, verilerinizin görselleştirmesi ve etkileşimi ile ilgili kararlar almanıza olanak tanır. Örneğin, marketlerin haritasına bakarken yalnızca toplu taşıma biletleri satan mağazaları görüntülemeyi seçebilirsiniz.

Poligon çizin

Data.Polygon sınıfı poligonları sarmalama işlemini sizin için gerçekleştirir. Enlem/boylam koordinatları olarak tanımlanan bir veya daha fazla doğrusal halkadan oluşan diziyi iletebilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halkayı iletirseniz ikinci ve sonraki doğrusal halkalar, poligondaki iç yolları (delikler) tanımlamak için kullanılır.

Aşağıdaki örnekte, iki delikli bir dikdörtgen poligon bulunuyor:

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 yaygın olarak kullanılan bir standarttır. Hafiftir ve kolayca okunabilirliği sayesinde paylaşım ve ortak çalışma için idealdir. Veri katmanı sayesinde GeoJSON verilerini tek bir satır kodla bir Google haritasına ekleyebilirsiniz.

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

Her harita, GeoJSON dahil, rastgele coğrafi veri için bir veri katmanı görevi gören bir map.data nesnesine sahiptir. data nesnesinin loadGeoJSON() yöntemini çağırarak bir GeoJSON dosyası yükleyip görüntüleyebilirsiniz. Aşağıdaki örnekte, 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 göster

Örneği Dene

GeoJSON örneği

Bu sayfadaki örneklerin çoğunda ortak bir GeoJSON dosyası kullanılır. Bu dosya, "Google" içindeki altı karakteri Avustralya'da poligon olarak 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 söz konusu alanda Kaynaklar arası kaynak paylaşımı özelliğinin etkinleştirilmiş olması gerekir.

Aşağıda, dosyanın tam metni 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 Stilini Belirleme

Verilerinizin nasıl görüneceğini belirtmek için Data.setStyle() yöntemini kullanın. setStyle() yöntemi, bir değişmez nesne nesnesi veya her özelliğin stilini hesaplayan bir işlev alır.

Basit stil kuralları

Özelliklerin stilini belirlemenin en basit yolu, StyleOptions nesnesi değişmez değerini setStyle() öğesine geçirmektir. Bu işlem, koleksiyonunuzdaki her özellik için tek bir stil ayarlar. Her özellik türünün kullanılabilir seçeneklerin yalnızca bir alt kümesini oluşturabildiğini unutmayın. Bu da farklı özellik türlerinin stillerini tek bir nesne değişmez değerinde birleştirmenin mümkün olduğu anlamına geliyor. Örneğin, aşağıdaki snippet hem nokta geometrilerini etkileyen özel icon hem de yalnızca poligonları 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 bölümünde bulabilirsiniz.

Aşağıda, bir StyleOptions nesne sabiti kullanarak birkaç özellik için fırça ve dolgu renginin nasıl ayarlanacağına dair bir örnek verilmiştir. Her bir poligonun aynı stilde olduğuna dikkat edin.

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

Bildirim tarzı olan stil kuralları

Çok sayıda bindirmenin (ör. işaretçiler veya çoklu çizgiler) stilini güncellemek isterseniz genellikle haritanızdaki her bir bindirmeyi yinelemeniz ve stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı ile kuralları kurallarla belirleyebilirsiniz ve 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 özellik özelliklerini kullanabilirsiniz.

Örneğin, aşağıdaki kod, ascii karakter kümesindeki konumunu inceleyerek google.json özelliğimizdeki her karakterin rengini belirler. Bu örnekte, verilerimizi ve karakter konumunu 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 ö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 istediğiniz zamanlar olabilir. Örneğin tıklama sırasında bir özelliği öne çıkarmak için kullanılır.

Özel stil kuralları uygulamak için overrideStyle() yöntemini kullanın. overrideStyle() yöntemi ile değiştirdiğiniz tüm özellikler, setStyle() içinde zaten belirtilmiş olan genel stillere ek olarak uygulanır. Örneğin, aşağıdaki kod bir poligonun dolgu rengini değiştirir, ancak başka bir 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şturulur, icon ise yalnızca nokta geometrisinde görünür. Daha fazla bilgiyi StyleOptions için referans dokümanlarında bulabilirsiniz.

Tüm geometrilerde kullanılabilir

  • clickable: true ise özellik fare ve dokunma etkinliklerini alır
  • visible: true ise özellik görünürdür.
  • zIndex: Tüm özellikler, zIndex sırasına göre gösterilir. Yüksek değerlere sahip özelliklerin önünde daha yüksek değerler gösterilir. İşaretçiler her zaman çizgi ve poligonların önünde gösterilir.

Nokta geometrilerinde kullanılabilir

  • cursor: Fareyle üzerine geldiğinizde gösterilecek fare imleci.
  • icon: Nokta geometri için gösterilecek simge.
  • shape: İsabet algılama için kullanılan resim haritasını tanımlar.
  • title: Fareyle üzerine gelinen metin.

Çizgi geometrik şekillerde kullanılabilir

  • strokeColor: Fırça rengi. Genişletilmiş adlandırılmış renkler haricinde tüm CSS3 renkleri desteklenir.
  • strokeOpacity: 0,0 ile 1,0 arasında fırça opaklığı.
  • strokeWeight: Fırça genişliği piksel cinsindendir.

Poligon geometrilerinde kullanılabilir

  • fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler haricinde tüm CSS3 renkleri desteklenir.
  • fillOpacity: 0.0 ile 1.0. arasındaki dolgu opaklığı
  • strokeColor: Fırça rengi. Genişletilmiş adlandırılmış renkler haricinde tüm CSS3 renkleri desteklenir.
  • strokeOpacity: 0,0 ile 1,0 arasında fırça opaklığı.
  • strokeWeight: Fırça genişliği piksel cinsindendir.

Etkinlik İşleyicileri ekleyin

Ö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:

  • 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 dokümanlarında bulabilirsiniz.

Görünümü Dinamik Bir Şekilde 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ığı anda 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();
});