Warstwa danych

Wybierz platformę: Android iOS JavaScript

Warstwa Dane Map Google to kontener na dowolne dane geoprzestrzenne. Możesz użyć warstwy danych do przechowywania niestandardowych danych lub do wyświetlania GeoJSON na mapie Google.

Omówienie

Obejrzyj film DevBytes, by dowiedzieć się więcej o warstwie danych.

Za pomocą interfejsu Maps JavaScript API możesz oznaczyć mapę za pomocą atrybutu różnych nakładek, takich jak znaczniki, linie łamane, wielokąty itp. Każdy z nich polega na połączeniu informacji o stylu z danymi o lokalizacji. Klasa google.maps.Data to kontener na dowolne dane geoprzestrzenne. Zamiast tego można dodać za pomocą warstwy danych dane geograficzne na mapie. Jeśli dane zawierają geometrie, takie jak punkty, lub wielokąty, interfejs API będzie domyślnie renderować je jako znaczniki, linie łamane i wielokąty. Możesz zmienić styl tych obiektów tak jak w przypadku zwykłej nakładki, stosować reguły stylu oparte na innych właściwościach zawartych w zbiorze danych.

Zajęcia google.maps.Data umożliwiają:

  • Rysuj wielokąty na mapie.
  • Dodaj dane GeoJSON do mapy.
    GeoJSON to standard danych geoprzestrzennych w internecie. Klasa Data jest zgodna ze strukturą GeoJSON w swojej reprezentacji danych i ułatwia wyświetlanie danych GeoJSON. Użyj metody loadGeoJson() do: łatwo importować dane GeoJSON i wyświetlać punkty, ciągi wierszy oraz wielokąty.
  • Użyj google.maps.Data, aby modelować dowolne dane.
    Z większością rzeczywistych elementów powiązane są inne właściwości. Dla: na przykład sklepy podają godziny otwarcia, drogi używają prędkości ruchu, a każda dziewczyna Grupa przewodników ma murawę, na której można kupić ciastka. Dzięki google.maps.Data możesz modelować te właściwości i określić odpowiedni styl danych.
  • Wybierz sposób przedstawiania danych i zmień ich ustawienia swoje głowę na bieżąco.
    Warstwa danych umożliwia podejmowanie decyzji dotyczących wizualizacji interakcji z danymi. Na przykład, gdy spojrzymy na mapę wygody, możesz wyświetlić tylko te sklepy, w których sprzedaje się transport publiczny biletów.

Narysuj wielokąt

Data.Polygon klasa obsługuje zawijanie wielokątów. Można przekazać do niej tablicę zawierającą pierścienie liniowe zdefiniowane jako współrzędne szerokości i długości geograficznej. Pierwszy pierścień liniowy określa zewnętrzną granicę wielokąta. Jeśli mijasz więcej niż jeden pierścień, drugi i kolejne pierścienie liniowe są używane do zdefiniowania ścieżek wewnętrznych (otwory) w wielokątie.

W poniższym przykładzie tworzony jest prostokątny wielokąt z 2 otworami:

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

Wczytaj GeoJSON

GeoJSON to popularny standard udostępniania danych geoprzestrzennych. w internecie. Jest lekki i czytelny dla człowieka, dzięki czemu idealnie do udostępniania i współpracy. Za pomocą warstwy danych możesz dodawać dane GeoJSON do mapę Google w jednym wierszu kodu.

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

Każda mapa ma: map.data który działa jak warstwa danych dla dowolnych danych geoprzestrzennych, w tym GeoJSON. Aby wczytać i wyświetlić plik GeoJSON, wywołaj loadGeoJSON() obiektu data. Poniższy przykład pokazuje, jak dodać i wczytać mapę zewnętrznych danych GeoJSON.

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
Zobacz przykład

Zobacz próbkę

Przykładowy plik GeoJSON

Większość przykładów na tej stronie korzysta z typowego pliku GeoJSON. Ten plik określa, 6 znaków w polu „Google” w postaci wielokątów nad Australią. Zachęcamy do skopiuj lub zmodyfikuj go podczas testowania warstwy danych.

Uwaga: aby można było wczytać plik json z innej domeny, musi ona mieć włączono Udostępnianie zasobów między domenami.

Pełny tekst pliku jest widoczny poniżej po rozwinięciu małej strzałki do słów google.json.

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]
          ]
        ]
      }
    }
  ]
}

Określanie stylu danych GeoJSON

Aby określić, jak powinny wyglądać dane, użyj metody Data.setStyle(). Metoda setStyle() przyjmuje StyleOptions literału obiektu lub funkcji obliczającej styl każdej cechy.

Proste reguły stylu

Najprostszym sposobem określenia stylu cech jest przekazanie literału obiektu StyleOptions do: setStyle(). Spowoduje to ustawienie jednego stylu dla każdego elementu w kolekcji. Pamiętaj, że każdy typ obiektu może renderować tylko podzbiór wartości dostępnych opcji. Oznacza to, że można łączyć style dla różnych typów cech w jednym literaale obiektu. Na przykład poniższe zestawy fragmentów kodu niestandardowe ustawienie icon, które ma wpływ tylko na geometrię punktową, oraz fillColor, co ma wpływ tylko na wielokąty.

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

Więcej informacji na temat prawidłowych kombinacji stylów i funkcji można znaleźć w sekcji Styl Opcje.

Poniżej znajduje się przykład ustawiania koloru linii i wypełnienia dla kilku obiektów za pomocą literału obiektu StyleOptions. Zwróć uwagę, że każdy wielokąt tak samo.

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

Reguły stylu deklaratywnego

Jeśli chcesz zmienić styl dużej liczby nakładek, takich jak znaczniki lub linii łamanych, zwykle trzeba przejrzeć każdą nakładkę na mapie i ustawić jej styl indywidualnie. Dzięki warstwie danych możesz określać reguły, deklaratywnie. Będą one stosowane do całego zbioru danych. Gdy jeden dane lub reguły zostaną zaktualizowane, styl zostanie zastosowany automatycznie do każdej cechy. Za pomocą właściwości cech możesz dostosować ich styl.

Na przykład poniższy kod ustawia kolor każdego znaku w naszym google.json, sprawdzając jej pozycję w zestawie znaków ASCII. W tym przypadku zakodowaliśmy też pozycję znaku wraz z naszymi danymi.

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

Usuń style

Jeśli chcesz usunąć zastosowane style, przekaż pusty literał obiektu do funkcji Metoda setStyles().

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

Spowoduje to usunięcie wszystkich określonych przez Ciebie stylów niestandardowych, a funkcje zostaną renderowanie przy użyciu stylów domyślnych. Jeśli zamiast tego chcesz przestać renderować kod ustaw właściwość visible StyleOptions na false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Zastąp style domyślne

Reguły stylu są zwykle stosowane do każdej funkcji w warstwie danych. Może jednak się zdarzyć, że zechcesz zastosować specjalne reguły stylu do określonych funkcji. Pozwala to na przykład wyróżniać obiekty po kliknięciu.

Aby zastosować specjalne reguły stylu, użyj metody overrideStyle(). Dowolne usługi zmienione za pomocą metody overrideStyle() są stosowane oprócz metody style globalne określone już w elemencie setStyle(). Na przykład ten kod zmienia kolor wypełnienia wielokąta po kliknięciu, ale nie ma stylów.

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

Wywołaj metodę revertStyle(), aby usunąć wszystkie zastąpienia stylu.

Opcje stylów

Dostępne opcje określania stylu poszczególnych cech zależą od ich typu. Na przykład reklama fillColor będzie renderowana tylko w przypadku geometrii wielokątów, a icon jest wyświetlany tylko w geometrii punktowej. Więcej informacji znajdziesz w dokumentacja dla StyleOptions

Dostępne dla wszystkich geometrii

  • clickable: jeśli true, funkcja odbiera zdarzenia myszy i dotknięcia
  • visible: jeśli true, funkcja jest widoczna.
  • zIndex: wszystkie obiekty są wyświetlane na mapie w kolejności według: zIndex, w których wyższe wartości są wyświetlane przed cechami o niższych wartościach. Znaczniki są zawsze wyświetlane przed ciągami linii i wielokątami.

Funkcja dostępna w przypadku geometrii punktowej.

  • cursor: po najechaniu kursorem wyświetlany jest kursor myszy.
  • icon: ikona do wyświetlania dla geometrii punktowej.
  • shape: określa mapę obrazu używaną do wykrywania trafień.
  • title: tekst po najechaniu kursorem myszy.

Funkcja dostępna w przypadku geometrii linii.

  • strokeColor: kolor kreski. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzone kolory nazwane.
  • strokeOpacity: przezroczystość kreski w zakresie od 0,0 do 1,0.
  • strokeWeight: szerokość kreski w pikselach.

Funkcja dostępna w przypadku geometrii wielokątnych.

  • fillColor: kolor wypełnienia. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzone kolory nazwane.
  • fillOpacity: przezroczystość wypełnienia między 0.0 a 1.0.
  • strokeColor: kolor kreski. Obsługiwane są wszystkie kolory CSS3 oprócz rozszerzone kolory nazwane.
  • strokeOpacity: przezroczystość kreski w zakresie od 0,0 do 1,0.
  • strokeWeight: szerokość kreski w pikselach.

Dodaj moduły obsługi zdarzeń

Funkcje reagują na zdarzenia, np. mouseup lub mousedown. Możesz dodać wydarzenie detektorów, które pozwalają użytkownikom na interakcję z danymi na mapie. W polu poniżej dodamy na przykład zdarzenie najechania myszą, by wyświetlić informacje na temat obiektu po najechaniu kursorem myszy.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Zdarzenia warstwy danych

Poniższe zdarzenia są wspólne dla wszystkich obiektów niezależnie od ich geometrii typ:

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

Więcej informacji o tych zdarzeniach można znaleźć w dokumentacji referencyjnej dla klasy google.maps.data.

Dynamiczna zmiana wyglądu

Styl warstwy danych można ustawić, przekazując funkcję obliczającą stylu każdej cechy do metody google.maps.data.setStyle(). Ten jest wywoływana po każdej aktualizacji właściwości obiektu.

W poniższym przykładzie dodajemy detektor zdarzenia click, który aktualizuje właściwość isColorful funkcji. Styl cech został zmieniony na od razu po skonfigurowaniu właściwości będą odzwierciedlić zmianę.

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