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'u görüntülemek için Veri katmanını kullanabilirsiniz verileri Google haritasında gösterir.

Genel Bakış

Veri Katmanı hakkında daha fazla bilgi edinmek için bu DevBytes videosunu izleyin.

Maps JavaScript API ile bir haritayı Bunlar, işaretçiler, çoklu çizgiler, poligonlar vb. gibi çeşitli çeşitli bindirmeler Notlar, stil bilgilerini konum verileriyle birleştirir. İlgili içeriği oluşturmak için kullanılan google.maps.Data sınıfı, rastgele coğrafi veriler için bir kapsayıcıdır. Bunun yerine eklemek için, Veri katmanını kullanarak rastgele eklemek haritanıza ekleyebilirsiniz. Bu veriler noktalar gibi geometriler içeriyorsa çokgenler içeriyorsa, API bunları varsayılan olarak işaretçiler, çoklu çizgiler veya tıklayın. Bu özelliklerin stilini, normal bir bindirme gibi ayarlayabilirsiniz veya veri kümenizde bulunan diğer özelliklere dayalı olarak stil kuralları uygulamalısınız.

google.maps.Data sınıfıyla yapabilecekleriniz:

  • Haritanızda poligonlar çizin.
  • Haritanıza GeoJSON verileri ekleyin.
    . GeoJSON, internetteki coğrafi veriler için bir standarttır. İlgili içeriği oluşturmak için kullanılan Data sınıfı, veri temsilinde GeoJSON yapısını kullanır ve GeoJSON verilerinin görüntülenmesini kolaylaştırır. loadGeoJson() yöntemini kullanarak GeoJSON verilerini kolayca içe aktarabilir ve noktaları, çizgi dizelerini ve poligonları görüntüleyebilirsiniz.
  • Rastgele verileri modellemek için google.maps.Data kullanın.
    . Gerçek varlıkların çoğu, kendileriyle ilişkilendirilmiş başka özelliklere sahiptir. Örneğin, Örneğin, mağazaların çalışma saatleri, yolların trafik hızı ve her kız çocuğunun Rehber grubu kurabiye satan çimlerden yararlanıyor. google.maps.Data ile model oluşturabilirsiniz. ve verilerinizin stil özelliklerini ayarlayın.
  • Verilerinizin nasıl temsil edileceğini seçin ve değiştirin aklınızın bir köşesinde dursun.
    . Veri katmanı, görselleştirme hakkında kararlar almanıza ve verilerinizin etkileşimi büyük önem taşır. Örneğin, bir uygunluk haritasına bakıldığında yalnızca toplu taşıma satan mağazaları gösterebilirsiniz. biletler.

Çokgen çizin

Data.Polygon sınıfının poligon sarmalama işini sizin için halledin. Bu etiketi, örneğin bir veya daha fazla enlem/boylam koordinatları olarak tanımlanan doğrusal halkalar İlk doğrusal halka çokgenin dış sınırını tanımlar. Birden fazla doğrusal özellik geçerseniz halkası, ikinci ve ardından gelen doğrusal halkalar, iç yolları tanımlamak için kullanılır (delikler) görürsünüz.

Aşağıdaki örnek, içinde iki delik olan bir dikdörtgen poligon oluşturur:

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'u yükle

GeoJSON, coğrafi verilerin paylaşımı için yaygın olarak kullanılan bir standarttır internette geziniyor. Hafiftir ve kullanıcılar tarafından kolayca okunabildiğinden idealdir. paylaşım ve ortak çalışma için kullanın. Veri katmanıyla, GeoJSON verilerini bir Google haritasına ihtiyacınız vardır.

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

Her haritada bir map.data bulunur rastgele coğrafi veriler için bir veri katmanı görevi gören nesne GeoJSON. loadGeoJSON() öğesini çağırarak bir GeoJSON dosyası yükleyebilir ve görüntüleyebilirsiniz yöntemini data nesnesinin içinde tutun. Aşağıdaki örnekte bir haritanın nasıl eklenip yükleneceği gösterilmektedir harici GeoJSON verileri.

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 inceleyin

Ö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'nın üzerinde bir poligon olarak birleştirdik. Lütfen Veri katmanını test ederken bu dosyayı kopyalayın veya değiştirin.

Not: Başka bir alandan json dosyası yükleyebilmeniz için söz konusu alan adının Kaynaklar arası kaynak paylaşımı etkin.

Dosyanın tam metni, aşağıdaki küçük oku genişleterek görülebilir: google.json kelimelerin olduğu anlamına gelir.

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ünmesi gerektiğini belirtmek için Data.setStyle() yöntemini kullanın. İlgili içeriği oluşturmak için kullanılan setStyle() yöntemi, StyleOptions nesne değişmez değeri veya her özellik için stili hesaplayan bir işlev.

Basit stil kuralları

Özelliklerin stilini belirlemenin en basit yolu, bir StyleOptions nesne değişmez değerini iletmektir Hedef: setStyle(). Bu işlem, koleksiyonudur. Her özellik türünün yalnızca bir kullanılabilir. Bu sayede, farklı öğeler için stilleri birleştirebilir, tek bir nesne değişmez değerindedir. Örneğin, aşağıdaki snippet Hem yalnızca nokta geometrilerini etkileyen özel bir icon hem de fillColor, Bu yalnızca çokgenleri etkiler.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Geçerli stil/özellik kombinasyonları hakkında daha fazla bilgi için Stil Seçenekler'i tıklayın.

Aşağıda, çeşitli özellikler için fırça ve dolgu rengini ayarlamaya yönelik bir örnek verilmiştir bir StyleOptions nesne değişmez değeri kullanın. Her poligonun stilinin aynı.

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

Bildirim temelli stil kuralları

İşaretçiler gibi çok sayıda yer paylaşımının stilini güncellemek istiyorsanız haritadaki her bir bindirmeyi tekrarlamanız gerekir. ve stilini ayrı ayrı ayarlayın. Veri katmanıyla, kullanıcı davranışıyla ilgili etkiler ve bunlar tüm veri kümenize uygulanır. Herhangi bir veriler veya kurallar güncellendiğinde, stil otomatik olarak uygulanır. bazı özellikleri inceleyelim. Stilini özelleştirmek için özellik özelliklerini kullanabilirsiniz.

Örneğin, aşağıdaki kod google.json. Bu durumda karakter konumunu da verilerimizle 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 boş bir nesne değişmez değerini setStyles() yöntemini çağırın.

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

Bu işlem, belirttiğiniz tüm özel stilleri kaldırır ve özellikler, oluşturmak için varsayılan stilleri kullanabilirsiniz. İsterseniz özellikleri için StyleOptions öğesinin 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. Ancak, URL'ye özel biçimlendirme kuralları uygulamak özellikler. Örneğin, tıklandığında bir özelliği vurgulamanın yolu olarak.

Özel stil kuralları uygulamak için overrideStyle() yöntemini kullanın. Tüm mülkler overrideStyle() yöntemiyle değiştirdiğiniz ve genel stiller setStyle() içinde zaten belirtilmiş. Örneğin, aşağıdaki kod tıklandığında bir poligonun dolgu rengini değiştirir, ancak başka bir çokgen stillerini ayarlayın.

// 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ı 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 geometrileri üzerinde oluştururken icon yalnızca bir nokta geometrisinde görünür. Şuradan daha fazla bilgi edinebilirsiniz: referans belgeleme StyleOptions

Tüm geometrilerde kullanılabilir

  • clickable: true ise bu özellik fare ve dokunma etkinlikleri alır
  • visible: true ise özellik görünür durumdadır.
  • zIndex: Tüm özellikler haritada zIndex sırasına göre gösterilir. daha yüksek değerlere sahip özelliklerin önünde görüntülenir. İş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 resim haritasını tanımlar.
  • title: Fareyle üzerine gelindiğinde gösterilen metin.

Çizgi geometrilerinde kullanılabilir

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

Poligon geometrilerinde kullanılabilir

  • fillColor: Dolgu rengi. Aşağıdakiler hariç tüm CSS3 renkleri desteklenir genişletilmiş adlandırılmış renk.
  • fillOpacity: 0.0 ile 1.0. arasında dolgu opaklığı
  • strokeColor: Fırça rengi. Aşağıdakiler hariç tüm CSS3 renkleri desteklenir genişletilmiş adlandırılmış renk.
  • strokeOpacity: 0,0 ile 1,0 arasında fırça opaklığı.
  • strokeWeight: Piksel cinsinden fırça genişliği.

Etkinlik İşleyicileri Ekle

Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Etkinlik ekleyebilirsiniz dinleyiciler aracılığıyla, kullanıcıların haritadaki verilerle etkileşim kurmasına olanak tanır. Aşağıda Mesela, fare imleciyle üzerine gelerek harekete geçirici bir etkinlik tıklayın.

// 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, geometrilerine bakılmaksızın tüm özelliklerde ortaktır tür:

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

Bu etkinlikler hakkında daha fazla bilgiye referans belgelerinden ulaşabilirsiniz. google.maps.data sınıfı için.

Görünümü Dinamik Olarak Değiştirme

Veri katmanının stilini, her özelliğin stilini google.maps.data.setStyle() yöntemine uyarlama. Bu işlevi, 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ünceller. Özelliğin stili şu şekilde güncellendi: mülk ayarlanır ayarlanmaz değişikliği yansıtır.

// 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();
});