Veri Katmanı

Platform seçin: Android iOS JavaScript

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östermek 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çiler, çoklu çizgiler, poligonlar vb. gibi çeşitli yer paylaşımlarıyla işaretleyebilirsiniz. Bu ek açıklamaların her biri stil bilgileriyle konum verilerini 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; nokta, çizgi veya çokgen gibi geometriler içeriyorsa API bunları varsayılan olarak işaretçi, çoklu çizgi ve çokgen şeklinde oluşturur. Bu özellikleri normal bir yer paylaşımı gibi stilize edebilir veya veri kümenizde bulunan diğer özelliklere göre stil kuralları uygulayabilirsiniz.

google.maps.Data sınıfı sayesinde şunları yapabilirsiniz:

  • Haritanızda poligonlar çizin.
  • Haritanıza GeoJSON verileri ekleyin.
    GeoJSON, internetteki coğrafi veriler için bir standarttır. Data sınıfı, veri gösteriminde GeoJSON'un yapısını izler ve GeoJSON verilerinin gösterilmesini kolaylaştırır. loadGeoJson() yöntemini kullanarak GeoJSON verilerini kolayca içe aktarın ve noktaları, çizgi dizilerini ve poligonları görüntüleyin.
  • İstediğiniz verileri modellemek için google.maps.Data kullanın.
    Gerçek dünyadaki çoğu varlıkla ilişkili başka özellikler vardır. Örneğin, mağazaların açılış saatleri, yolların trafik hızı ve her Kız İzci grubunun kurabiye satışı yaptığı bölge vardır. google.maps.Data ile bu özellikleri modelleyebilir ve verilerinizi buna göre şekillendirebilirsiniz.
  • Verilerinizin nasıl gösterileceğini seçin ve fikrinizi anında değiştirin.
    Veri katmanı, verilerinizin görselleştirilmesi ve etkileşimi hakkında kararlar almanızı sağlar. Örneğin, marketlerin haritasına bakarken yalnızca toplu taşıma bileti satan marketleri göstermeyi seçebilirsiniz.

Poligon çizme

Data.Polygon sınıfı, çokgen sarmayı sizin için işler. 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 iletirseniz ikinci ve sonraki doğrusal halkalar, çokgendeki iç yolları (delikler) tanımlamak için kullanılır.

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

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

GeoJSON, internette coğrafi verileri paylaşmak için kullanılan yaygın bir standarttır. Hafif ve kolayca okunabilir olduğundan paylaşım ve ortak çalışma için idealdir. Veri katmanı ile yalnızca tek bir kod satırı kullanarak bir Google Haritası'na GeoJSON verileri 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. loadGeoJSON() nesnesinin data 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şlemi gösterilmektedir.

TypeScript

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  let innerMap = mapElement.innerMap;

  google.maps.event.addListenerOnce(innerMap, "idle", () => {
    innerMap.data.loadGeoJson("google.json");
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    let innerMap = mapElement.innerMap;
    google.maps.event.addListenerOnce(innerMap, "idle", () => {
        innerMap.data.loadGeoJson("google.json");
    });
}
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" kelimesindeki altı karakteri Avustralya üzerinde çokgenler 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 bu alanda kaynaklar arası kaynak paylaşımı etkinleştirilmiş olmalıdır.

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 Stilleme

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

Basit stil kuralları

Özellikleri stilendirmenin en basit yolu, StyleOptions nesne değişmezini setStyle() öğesine iletmektir. Bu işlem, koleksiyonunuzdaki her özellik için tek bir stil ayarlar. Her özellik türünün, mevcut seçeneklerin yalnızca bir alt kümesini oluşturabildiğini unutmayın. Bu nedenle, farklı özellik türlerine ait stilleri tek bir nesne değişmezinde birleştirmek mümkündür. Ö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 birkaç özelliğin kontur ve dolgu renginin ayarlanmasıyla ilgili bir örnek verilmiştir. Her poligonun aynı şekilde stilize edildiğine dikkat edin.

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

Bildirimli stil kuralları

İşaretçiler veya çoklu çizgiler gibi çok sayıda yer paylaşımının stilini güncellemek istiyorsanız genellikle haritanızdaki her yer paylaşımını tek tek inceleyip stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı sayesinde kuralları bildirimsel olarak ayarlayabilir ve tüm veri kümenize uygulayabilirsiniz. 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 öğemizdeki her karakterin rengini 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 stilleri kaldırmak istiyorsanız setStyles() yöntemine boş bir nesne değişmezi 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. 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 bazı durumlarda 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 tüm özellikler, setStyle() içinde önceden belirtilmiş olan genel stillere ek olarak uygulanır. Örneğin, aşağıdaki kod, tıklama sırası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 özelliği stilize etmek için kullanabileceğiniz seçenekler, özellik türüne bağlıdır. Örneğin, fillColor yalnızca poligon geometrilerde oluşturulurken icon yalnızca nokta geometrisinde görünür. Daha fazla bilgi için StyleOptions ile ilgili referans belgelerine bakın.

Tüm geometrilerde kullanılabilir

  • clickable: true ise özellik, fare ve dokunma etkinliklerini alır.
  • visible: true ise özellik görünür.
  • zIndex: Tüm özellikler, zIndex sı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 ç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: Tıklama algılama için kullanılan resim haritasını tanımlar.
  • title: Fareyle üzerine gelindiğinde gösterilen metin.

Çizgi geometrilerinde kullanılabilir

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

Poligon geometrilerde kullanılabilir

  • fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • fillOpacity: 0.0 ile 1.0. arasındaki dolgu opaklığı
  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: Kontur opaklığı (0,0 ile 1,0 arasında).
  • strokeWeight: Piksel cinsinden kontur genişliği.

Etkinlik işleyicileri ekleme

Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Kullanıcıların haritadaki verilerle etkileşimde bulunmasına izin vermek için etkinlik dinleyicileri ekleyebilirsiniz. Aşağıdaki örnekte, fare imlecinin altında özellik hakkında bilgi 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üründen 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 ö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. Mülk ayarlandığı anda değişikliği yansıtacak şekilde özellik stili 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();
});