Importowanie danych GeoJSON do Map

Przegląd

Dowiedz się, jak importować dane GeoJSON ze źródła lokalnego lub zdalnego i wyświetlać je na mapie. W tym samouczku używamy poniższej mapy, aby zilustrować różne techniki importowania danych do map.

W sekcji poniżej znajdziesz cały kod potrzebny do utworzenia mapy w tym samouczku.

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.ts

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.js

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

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

<html>
  <head>
    <title>Earthquake Markers</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Wczytuję dane

W tej sekcji dowiesz się, jak wczytywać dane z tej samej domeny co aplikacja Maps JavaScript API lub z innej domeny.

Wczytywanie danych z tej samej domeny

Warstwa danych Map Google udostępnia kontener na dowolne dane geoprzestrzenne (w tym GeoJSON). Jeśli dane znajdują się w pliku hostowanym w tej samej domenie co aplikacja Maps JavaScript API, możesz je wczytać za pomocą metody map.data.loadGeoJson(). Plik musi znajdować się w tej samej domenie, ale możesz go hostować w innej subdomenie. Możesz na przykład wysłać żądanie do files.example.com z www.example.com.

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

Wczytywanie danych z różnych domen

Możesz też poprosić o dane z domeny innej niż Twoja, jeśli konfiguracja domeny na to pozwala. Standardem dla tego uprawnienia jest współdzielenie zasobów pomiędzy serwerami z różnych domen (CORS). Jeśli domena zezwala na żądania z innych domen, jej nagłówek odpowiedzi powinien zawierać tę deklarację:

Access-Control-Allow-Origin: *

Aby sprawdzić, czy domena ma włączony mechanizm CORS, użyj Narzędzi deweloperskich w Chrome.

Wczytywanie danych z takiej domeny jest takie samo jak wczytywanie danych JSON z tej samej domeny:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Żądanie JSONP

Aby można było użyć tej techniki, domena docelowa musi obsługiwać żądania JSONP.

Aby poprosić o JSONP, użyj createElement(), aby dodać tag script do nagłówka dokumentu.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Gdy skrypt jest uruchamiany, domena docelowa przekazuje dane jako argument do innego skryptu, zwykle o nazwie callback(). Domena docelowa określa nazwę skryptu wywołania zwrotnego, która jest pierwszą nazwą na stronie po wczytaniu docelowego adresu URL w przeglądarce.

Jeśli na przykład wczytasz w oknie przeglądarki adres http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp, zobaczysz nazwę wywołania zwrotnego eqfeed_callback.

Musisz zdefiniować skrypt wywołania zwrotnego w kodzie:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Użyj metody addGeoJson(), aby umieścić przeanalizowane dane GeoJSON na mapie.

Importowanie obiektów geometrycznych GeoJSON

Metoda map.data.addGeoJson() wymaga przeanalizowanego obiektu GeoJSON Feature lub FeatureCollection. Nie akceptuje bezpośrednio samodzielnych obiektów geometrycznych GeoJSON (Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon ani GeometryCollection).

Jeśli źródło danych lub odpowiedź interfejsu API zwraca samodzielny obiekt geometryczny GeoJSON bez opakowania "type": "Feature" najwyższego poziomu, przed wywołaniem map.data.addGeoJson() musisz go opakować w obiekt Feature.

Jeśli na przykład geometria (np. Polygon) jest przeanalizowanym obiektem JavaScriptu, umieść ją w obiekcie Feature:

const polygonGeometry = {
  type: "Polygon",
  coordinates: [
    [
      [-78.45, 35.82],
      [-78.41, 35.73],
      [-78.28, 35.66],
      [-78.45, 35.82],
    ],
  ],
};

const geoJsonFeature = {
  type: "Feature",
  geometry: polygonGeometry,
};

map.data.addGeoJson(geoJsonFeature);

Jeśli geometria jest zwracana jako ciąg znaków w formacie JSON (np. pole polygon zwracane przez alert pogodowy lub odpowiedź dotyczącą granicy), możesz też dodać nagłówek i stopkę, aby utworzyć prawidłowy obiekt GeoJSON Feature przed przeanalizowaniem go za pomocą JSON.parse():

const geojson_header = "{\"type\":\"Feature\", \"geometry\": ";
const geojson_footer = "}";

map.data.addGeoJson(
    JSON.parse(geojson_header + polygon + geojson_footer));

Więcej informacji o pracy z geometriami i wielokątami w warstwie danych znajdziesz w przewodniku dla deweloperów dotyczącym warstwy danych.

Stylizowanie danych

Możesz zmienić wygląd danych, dodając dane GeoJSON do obiektu Map. Więcej informacji o stylizowaniu danych znajdziesz w przewodniku dla programistów.

Więcej informacji

• GeoJSON to powszechnie używany otwarty format kodowania danych geograficznych oparty na formacie JSON (JavaScript Object Notation). Narzędzia i metody JavaScriptu przeznaczone do danych JSON działają też z GeoJSON. Więcej informacji znajdziesz w przewodniku dla programistów.
• JSONP to skrót od padded JSON (JSON z dopełnieniem). Jest to metoda komunikacji używana w programach JavaScript, które działają w przeglądarkach, do żądania danych z serwera w innej domenie.