Veri Katmanı

Platform seçin: Android iOS JavaScript

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'yi kullanarak bir haritayı işaretçi, çoklu çizgi, poligon vb. çeşitli yer paylaşımlarıyla işaretleyebilirsiniz. Bu ek açıklamalar, 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, veri katmanını kullanarak haritanıza rastgele coğrafi veriler ekleyebilirsiniz. Söz konusu veriler; noktalar, çizgiler veya poligonlar gibi geometriler içeriyorsa API, bunları varsayılan olarak işaretçi, çoklu çizgi ve poligon şeklinde oluşturur. Bu özelliklerin stilini normal yer paylaşımı gibi biçimlendirebilir veya veri kümenizde bulunan diğer özelliklere dayalı stil kuralları uygulayabilirsiniz.

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

  • Haritanızda poligonlar çizin.
  • Haritanıza GeoJSON verilerini ekleyin.
    GeoJSON, internetteki coğrafi veriler için kullanılan bir standarttır. Data sınıfı, veri temsilinde GeoJSON'in yapısını takip eder ve GeoJSON verilerini görüntülemeyi kolaylaştırır. GeoJSON verilerini kolayca içe aktarmak, noktaları, çizgi dizelerini ve poligonları görüntülemek için loadGeoJson() yöntemini kullanın.
  • Rastgele verileri modellemek için google.maps.Data kullanın.
    Gerçek varlıkların çoğu, kendileriyle ilişkili başka mülklere sahiptir. Örneğin, mağazaların çalışma saatleri, yolların trafik hızı ve her kız rehber grubunun kurabiye satılan çimleri vardır. google.maps.Data ile bu özellikleri modelleyebilir ve verilerinizin stilini buna göre belirleyebilirsiniz.
  • Verilerinizin nasıl temsil edileceğini seçin ve anında fikrinizi anında değiştirin.
    Veri katmanı, verilerinizin görselleştirme ve etkileşim hakkında kararlar vermenizi sağlar. Ö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 sarma işlemini sizin için yapar. Enlem/boylam koordinatları olarak tanımlanan bir veya daha fazla doğrusal halkadan oluşan bir diziyi iletebilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halka geçirirseniz poligonda iç yolları (delikler) tanımlamak için ikinci ve sonraki doğrusal halkalar kullanılır.

Aşağıdaki örnekte içinde iki delik bulunan dikdörtgen bir poligon oluşturulmuştur:

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 yükleme

GeoJSON, internette jeo-uzamsal veri paylaşımında yaygın olarak kullanılan bir standarttır. Hafiftir ve kolayca okunabilir olduğundan paylaşım ve ortak çalışma için idealdir. Veri katmanı sayesinde, GeoJSON verilerini bir Google haritasına tek bir satırlık kodla ekleyebilirsiniz.

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

Her haritada, GeoJSON gibi 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, nasıl harita 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örüntüleyin

Ö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ükleyebilmek için ilgili alanda Kaynaklar arası kaynak paylaşımı etkinleştirmiş olmalıdır.

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

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 Ayarlama

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

Basit stil kuralları

Özellikleri biçimlendirmenin en basit yolu, setStyle() nesnesine değişmez değer (StyleOptions) iletmektir. 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, farklı özellik türlerine ilişkin stillerin tek bir değişmez nesne değerinde birleştirilebileceği 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 bilgiyi Stil Seçenekleri'nde bulabilirsiniz.

Aşağıda, StyleOptions nesne değişmez değeri kullanarak çeşitli özellikler için fırça ve dolgu rengini ayarlamayla ilgili bir örnek verilmiştir. Her bir poligonun stilinin aynı şekilde belirlendiğine dikkat edin.

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

Bildirim temelli stil kuralları

İşaretçi veya çoklu çizgi gibi çok sayıda bindirmenin stilini güncellemek istiyorsanız genellikle haritanızdaki her bindirmeyi yinelemeniz ve stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı ile kuralları bildirimli şekilde ayarlayabilirsiniz. Bu durumda 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 özelliklerin özelliklerini kullanabilirsiniz.

Örneğin, aşağıdaki kod, google.json içeriğimizdeki her karakterin rengini, ASCII karakter kümesindeki konumunu inceleyerek 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ğerini iletin.

// Remove custom styles.
map.data.setStyle({});

Bu işlem, belirttiğiniz tüm özel stilleri kaldırır ve özellikler varsayılan stilleri kullanarak oluşturulur. Özellikleri artık oluşturmak istemiyorsanız StyleOptions için 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 isteyebileceğiniz durumlar da vardır. Örneğin, tıklandığında özellik vurgulanabilir.

Ö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 hiç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 özelliğin stilini belirlemek için kullanılabilecek seçenekler ilgili özellik türüne bağlıdır. Örneğin, fillColor yalnızca poligon geometrilerinde görüntülenirken icon yalnızca bir nokta geometrisinde görünür. StyleOptions referans belgelerinde daha fazla bilgi 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 haritada zIndex sırasına göre görüntülenir. 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 görüntü haritasını tanımlar.
  • title: Fareyle üzerine gelindiğinde görünen metin.

Çizgi geometrileriyle kullanılabilir

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

Poligon geometrilerinde kullanılabilir

  • fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler dışında 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 dışında tüm CSS3 renkleri desteklenir.
  • strokeOpacity: Çizgi opaklığı 0,0 ile 1,0 arasında.
  • strokeWeight: Piksel cinsinden fırça genişliği.

Olay İşleyici Ekle

Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Kullanıcıların haritadaki verilerle etkileşimde bulunmasına izin vermek için etkinlik işleyiciler ekleyebilirsiniz. Aşağıdaki örnekte, fare imlecinin altında özellik hakkındaki 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, geometrik şekillerinden 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 Olarak Değiştirin

google.maps.data.setStyle() yöntemine her bir özelliğin stilini hesaplayan bir işlev 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, click etkinliği için özelliğin isColorful özelliğini güncelleyen bir etkinlik işleyici ekliyoruz. Özellik stili, mülk 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();
});