Warstwa danych

Wybierz platformę: Android iOS JavaScript

Warstwa danych Map Google udostępnia kontener na dowolne dane geoprzestrzenne. Za pomocą warstwy danych możesz przechowywać dane niestandardowe lub wyświetlać dane GeoJSON na mapie Google.

Omówienie

Aby dowiedzieć się więcej o warstwie danych, obejrzyj ten film z kanału DevBytes.

Za pomocą interfejsu Maps JavaScript API możesz dodawać do mapy różne nakładki, takie jak znaczniki, polilinie, wielokąty itp. Każda z tych adnotacji łączy informacje o stylu z danymi o lokalizacji. Klasa google.maps.Data to kontener na dowolne dane geoprzestrzenne. Zamiast dodawać te nakładki, możesz użyć warstwy danych, aby dodać do mapy dowolne dane geograficzne. Jeśli dane zawierają geometrie, takie jak punkty, linie lub wielokąty, interfejs API domyślnie sformatuje je jako znaczniki, wielolinie i wielokąty. Możesz nadać tym funkcjom styl tak jak zwykłemu nakładowi lub zastosować reguły stylizacji na podstawie innych właściwości zawartych w danym zbiorze danych.

Klasa google.maps.Data umożliwia:

  • Rysuj wielokąty na mapie.
  • Dodaj do mapy dane GeoJSON.
    GeoJSON to standard danych geoprzestrzennych w internecie. Klasa Data odzwierciedla strukturę danych GeoJSON, ułatwiając wyświetlanie tych danych. Aby łatwo importować dane GeoJSON oraz wyświetlać punkty, ciągi linii i poligony, użyj metody loadGeoJson().
  • Użyj funkcji google.maps.Data, aby modelować dowolne dane.
    Większość rzeczywistych obiektów ma powiązane z nimi inne właściwości. Na przykład sklepy mają godziny otwarcia, drogi mają prędkość, a każda grupa przewodników ma swoje terytorium, na którym sprzedaje ciasteczka. Dzięki google.maps.Data możesz modelować te właściwości i odpowiednio stylizować swoje dane.
  • Wybierz sposób wyświetlania danych i zmieniaj go w locie.
    Warstwę danych możesz wykorzystać do podejmowania decyzji dotyczących wizualizacji i interakcji z danymi. Na przykład podczas przeglądania mapy sklepów spożywczych możesz wyświetlić tylko te, które sprzedają bilety komunikacji miejskiej.

Rysowanie wielokąta

Klasa Data.Polygon obsługuje nawinięcie wielokąta. Możesz mu przekazać tablicę zawierającą co najmniej 1 pierścień liniowy zdefiniowany jako współrzędne szerokości i długości geograficznej. Pierwsze pierścieniowe pierścień określa zewnętrzną krawędź wielokąta. Jeśli podasz więcej niż 1 pierścień liniowy, drugi i kolejne pierścienie liniowe będą służyć do definiowania ścieżek wewnętrznych (otworów) w wielokącie.

W tym 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

Wczytywanie pliku GeoJSON

GeoJSON to powszechny standard udostępniania danych geoprzestrzennych w internecie. Jest lekki i łatwy do odczytania przez człowieka, co czyni go idealnym do udostępniania i współpracy. Za pomocą warstwy danych możesz dodać dane GeoJSON do mapy Google za pomocą zaledwie 1 wiersza kodu.

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

Każda mapa ma obiekt map.data, który działa jako warstwa danych dla dowolnych danych geoprzestrzennych, w tym GeoJSON. Plik GeoJSON możesz załadować i wyświetlić, wywołując metodę loadGeoJSON() obiektu data. Przykład poniżej pokazuje, jak dodać mapę i wczytać zewnętrzne dane 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

Wypróbuj próbkę

Przykładowy plik GeoJSON

Większość przykładów na tej stronie korzysta z typowego pliku GeoJSON. Ten plik definiuje 6 znaków w słowie „Google” jako wielokąty na mapie Australii. Podczas testowania warstwy danych możesz kopiować ten plik lub go modyfikować.

Uwaga: aby wczytać plik JSON z innej domeny, musisz włączyć w tej domenie udostępnianie zasobów między domenami.

Pełny tekst pliku możesz zobaczyć poniżej, rozwijając małą strzałkę obok 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]
          ]
        ]
      }
    }
  ]
}

Dane stylów GeoJSON

Użyj metody Data.setStyle(), aby określić wygląd danych. Metoda setStyle() przyjmuje albo literał obiektu StyleOptions, albo funkcję, która oblicza styl dla każdej cechy.

Proste reguły dotyczące stylu

Najprostszym sposobem stylizowania funkcji jest przekazanie obiektu StyleOptions do funkcji setStyle(). Dzięki temu dla każdego elementu w kolekcji zostanie ustawiony ten sam styl. Pamiętaj, że każdy typ funkcji może renderować tylko podzbiór dostępnych opcji. Oznacza to, że w ramach jednego literalu obiektu można łączyć style różnych typów cech. Na przykład fragment kodu poniżej ustawia niestandardowe icon, które ma wpływ tylko na geometrie punktowe, oraz fillColor, które ma wpływ tylko na wielokąty.

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

Więcej informacji o dozwolonych kombinacjach stylów i funkcji znajdziesz w sekcji Opcje stylów.

Poniżej znajdziesz przykład ustawienia koloru obrysu i wypełnienia dla kilku elementów za pomocą obiektu dosłownego StyleOptions. Zwróć uwagę, że każdy wielokąt ma ten sam styl.

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

Deklaracyjne reguły stylu

Jeśli chcesz zaktualizować styl dużej liczby nakładek, np. znaczników lub polilinii, musisz zwykle przejrzeć każdą nakładkę na mapie i osobno ustawić jej styl. Za pomocą warstwy danych możesz deklaratywnie ustawiać reguły, które będą stosowane w całym zbiorze danych. Gdy zaktualizujesz dane lub reguły, styl zostanie automatycznie zastosowany do wszystkich funkcji. Aby dostosować styl, możesz użyć właściwości funkcji.

Na przykład kod poniżej ustawia kolor każdego znaku w naszym tekście google.json, sprawdzając jego pozycję w zbiorze znaków ASCII. W tym przypadku zakodowaliśmy pozycję znaku wraz z 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
    };
});

Usuwanie stylów

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

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

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

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

Zastępowanie stylów domyślnych

Reguły stylizacji są zwykle stosowane do każdej funkcji w warstwie danych. Czasami jednak możesz chcieć zastosować specjalne reguły stylizacji do określonych funkcji. Może to być na przykład sposób na wyróżnienie funkcji po kliknięciu.

Aby zastosować specjalne reguły stylizacji, użyj metody overrideStyle(). Wszystkie właściwości, które zmienisz za pomocą metody overrideStyle(), są stosowane oprócz stylów globalnych określonych już w pliku setStyle(). Na przykład kod poniżej zmieni kolor wypełnienia wielokąta po kliknięciu, ale nie spowoduje zmiany żadnych innych 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'});
});

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

Opcje stylów

Opcje stylizacji poszczególnych funkcji zależą od ich typu. Na przykład fillColor będzie renderować tylko geometrie wielokątne, a icon będzie widoczna tylko w geometrii punktowej. Więcej informacji znajdziesz w dokumentacji referencyjnej StyleOptions.

Dostępne we wszystkich geometriach

  • clickable: jeśli true, funkcja odbiera zdarzenia myszy i dotyku.
  • visible: jeśli true, funkcja jest widoczna.
  • zIndex: wszystkie obiekty są wyświetlane na mapie w kolejności według ich zIndex, przy czym obiekty o większych wartościach są wyświetlane przed obiektami o mniejszych wartościach. Znaczniki są zawsze wyświetlane przed liniami i poligonami.

Dostępne dla geometrii punktowych

  • cursor: kursor myszy wyświetlany po najechaniu kursorem.
  • icon: ikona wyświetlana w przypadku geometrii punktu.
  • shape: definiuje mapę obrazu używaną do wykrywania trafień.
  • title: tekst najechania kursorem.

Dostępne w przypadku geometrii linii

  • strokeColor: kolor konturu. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów o nazwie.
  • strokeOpacity: krycie obrysu w zakresie od 0,0 do 1,0.
  • strokeWeight: szerokość obrysu w pikselach.

Dostępne w przypadku geometrii wielokątów

  • fillColor: kolor wypełnienia. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów o nazwie.
  • fillOpacity: przezroczystość wypełnienia między 0.0 a 1.0.
  • strokeColor: kolor konturu. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych kolorów o nazwie.
  • strokeOpacity: krycie obrysu w zakresie od 0,0 do 1,0.
  • strokeWeight: szerokość obrysu w pikselach.

Dodawanie modułów obsługi zdarzeń

Funkcje reagują na zdarzenia, takie jak mouseup lub mousedown. Możesz dodać odbiorcom zdarzeń, aby umożliwić użytkownikom interakcję z danymi na mapie. W przykładzie poniżej dodajemy zdarzenie mouseover, które wyświetla informacje o funkcji pod 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

Te zdarzenia są wspólne dla wszystkich elementów niezależnie od ich typu geometrii:

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

Więcej informacji o tych zdarzeniach znajdziesz w dokumentacji referencyjnej klasy google.maps.data.

Zmiana wyglądu dynamicznie

Styl warstwy danych możesz ustawić, przekazując do metody google.maps.data.setStyle() funkcję, która oblicza styl każdego elementu. Ta funkcja będzie wywoływana za każdym razem, gdy właściwości funkcji zostaną zaktualizowane.

W przykładzie poniżej dodajemy detektor zdarzeń dla zdarzenia click, które aktualizuje właściwość isColorful danej funkcji. Styl funkcji jest aktualizowany, aby odzwierciedlać zmiany, gdy tylko ustawisz usługę.

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