Warstwa danych

Wybierz platformę: Android iOS JavaScript

Warstwa danych Map Google to kontener na dowolne dane geoprzestrzenne. Warstwy danych możesz używać do przechowywania danych niestandardowych lub wyświetlania danych GeoJSON na mapie Google.

Przegląd

Więcej informacji o warstwie danych znajdziesz w tym filmie z serii DevBytes.

Za pomocą interfejsu Maps JavaScript API możesz oznaczać mapę różnymi nakładkami, takimi 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 renderuje je jako markery, polilinie i wielokąty. Możesz określić styl tych funkcji tak jak w przypadku zwykłej nakładki lub zastosować reguły stylu na podstawie innych właściwości zawartych w 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 ma strukturę GeoJSON w reprezentacji danych i ułatwia wyświetlanie danych GeoJSON. Użyj metody loadGeoJson(), aby łatwo importować dane GeoJSON i wyświetlać punkty, linie i wielokąty.
  • Użyj google.maps.Data, aby modelować dowolne dane.
    Większość obiektów w rzeczywistym świecie ma powiązane z nimi inne właściwości. Na przykład sklepy mają godziny otwarcia, drogi mają ograniczenia prędkości, a każda grupa skautek ma swój teren sprzedaży ciasteczek. google.maps.Data umożliwia modelowanie tych właściwości i odpowiednie formatowanie danych.
  • Wybierz sposób przedstawienia danych i zmień zdanie w dowolnym momencie.
    Warstwa danych umożliwia podejmowanie 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, w których można kupić bilety na transport publiczny.

Rysowanie wielokąta

Klasa Data.Polygon zajmuje się kolejnością wierzchołków wielokąta. Możesz przekazać do niego tablicę zawierającą co najmniej 1 pierścień liniowy zdefiniowany jako współrzędne określające szerokość i długość geograficzną. Pierwszy pierścień liniowy określa zewnętrzną granicę wielokąta. Jeśli przekażesz więcej niż jeden pierścień liniowy, drugi i kolejne pierścienie liniowe zostaną użyte do zdefiniowania wewnętrznych ścieżek (otworów) w wielokącie.

Ten przykład tworzy wielokąt prostokątny 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 łatwy do odczytania, dzięki czemu idealnie nadaje się do udostępniania i współpracy. Za pomocą warstwy danych możesz dodać dane GeoJSON do mapy Google za pomocą tylko 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. Aby wczytać i wyświetlić plik GeoJSON, wywołaj metodę loadGeoJSON() obiektu data. Poniższy przykład pokazuje, jak dodać mapę i wczytać zewnętrzne dane GeoJSON.

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;

  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;
    innerMap.data.loadGeoJson("google.json");
}
initMap();
index.js
Zobacz przykład

Wypróbuj

Przykładowy kod GeoJSON

Większość przykładów na tej stronie korzysta z tego samego pliku GeoJSON. Ten plik definiuje 6 znaków w słowie „Google” jako wielokąty nad Australią. Podczas testowania warstwy danych możesz skopiować lub zmodyfikować ten plik.

Uwaga: aby wczytać plik JSON z innej domeny, musi ona mieć włączone udostępnianie zasobów między domenami.

Pełną treść pliku możesz zobaczyć poniżej, klikają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]
          ]
        ]
      }
    }
  ]
}

Stylizowanie danych GeoJSON

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

Proste reguły stylu

Najprostszym sposobem na stylizowanie elementów 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 funkcji może renderować tylko podzbiór dostępnych opcji. Oznacza to, że w jednym literału obiektu można łączyć style dla różnych typów obiektów. Na przykład poniższy fragment kodu ustawia zarówno niestandardowy styl icon, który ma wpływ tylko na geometrię punktową, jak i styl fillColor, który ma wpływ tylko na wielokąty.

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

Więcej informacji o prawidłowych kombinacjach stylów i funkcji znajdziesz w sekcji Opcje stylu.

Poniżej znajdziesz przykład ustawiania koloru kreski i wypełnienia dla kilku elementów za pomocą literału obiektu StyleOptions. Zwróć uwagę, że każdy wielokąt ma taki sam styl.

TypeScript

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

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

  const innerMap = mapElement.innerMap;

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

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

initMap();
index.ts

JavaScript

async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    const innerMap = mapElement.innerMap;
    // Load GeoJSON.
    google.maps.event.addListenerOnce(innerMap, "idle", () => {
        innerMap.data.loadGeoJson("google.json");
    });
    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: "green",
        strokeWeight: 1,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Data Layer: Styling</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="-28,137" zoom="4"></gmp-map>
  </body>
</html>
index.html
Zobacz przykład

Wypróbuj

Deklaratywne reguły stylu

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

Na przykład poniższy kod ustawia kolor każdego znaku w naszym google.json, sprawdzając jego pozycję w zestawie 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ż do metody setStyles() pusty literał obiektu.

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

Spowoduje to usunięcie wszystkich określonych przez Ciebie stylów niestandardowych, a elementy będą renderowane przy użyciu stylów domyślnych. Jeśli nie chcesz już renderować funkcji, ustaw właściwość visible obiektu StyleOptions na false.

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

Zastępowanie stylów domyślnych

Reguły stylów są zwykle stosowane do każdego elementu w warstwie danych. Czasami jednak możesz chcieć zastosować specjalne reguły stylizacji do konkretnych 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(), zostaną zastosowane oprócz stylów globalnych określonych już w setStyle(). Na przykład poniższy kod zmieni kolor wypełnienia wielokąta po kliknięciu, ale nie ustawi ż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 stylu

Opcje stylizacji poszczególnych funkcji zależą od ich typu. Na przykład symbol fillColor będzie renderowany tylko w przypadku geometrii wielokątów, a symbol icon będzie wyświetlany tylko w przypadku geometrii punktów. Więcej informacji znajdziesz w dokumentacji referencyjnej dotyczącej StyleOptions.

Dostępne dla wszystkich geometrii

  • clickable: jeśli true, funkcja otrzymuje zdarzenia myszy i dotyku.
  • visible: jeśli true, funkcja jest widoczna.
  • zIndex: Wszystkie obiekty są wyświetlane na mapie w kolejności ich zIndex, przy czym obiekty o wyższych wartościach są wyświetlane przed obiektami o niższych wartościach. Markery są zawsze wyświetlane przed liniami i wielokątami.

Dostępne w przypadku geometrii punktowych

  • cursor: kursor myszy, który ma się wyświetlać po najechaniu.
  • icon: Ikona, która ma być wyświetlana w przypadku geometrii punktowej.
  • shape: definiuje mapę obrazu używaną do wykrywania kliknięć.
  • title: tekst po najechaniu kursorem.

Dostępne w przypadku geometrii linii

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

Dostępne w przypadku geometrii wielokątów

  • fillColor: kolor wypełnienia. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych nazw kolorów.
  • fillOpacity: nieprzezroczystość wypełnienia w zakresie od 0.0 do 1.0..
  • strokeColor: kolor konturu. Obsługiwane są wszystkie kolory CSS3 z wyjątkiem rozszerzonych nazw kolorów.
  • strokeOpacity: nieprzezroczystość obrysu w zakresie od 0,0 do 1,0.
  • strokeWeight: szerokość linii w pikselach.

Dodawanie modułów obsługi zdarzeń

Funkcje reagują na zdarzenia, takie jak mouseup czy mousedown. Możesz dodać detektory zdarzeń, aby umożliwić użytkownikom interakcję z danymi na mapie. W przykładzie poniżej dodajemy zdarzenie najechania kursorem, 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

Poniższe zdarzenia są wspólne dla wszystkich funkcji, 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.

Dynamiczna zmiana wyglądu

Styl warstwy danych możesz ustawić, przekazując do metody google.maps.data.setStyle() funkcję, która oblicza styl każdej cechy. 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 funkcji. Styl funkcji zostanie zaktualizowany, aby odzwierciedlać zmianę, gdy tylko usługa zostanie skonfigurowana.

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