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żyjemy mapy poniżej, aby zilustrować różne techniki importowania danych do map.

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

TypeScript

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;

JavaScript

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;

CSS

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

HTML

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

Wczytuję dane

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

Wczytywanie danych z tej samej domeny

Warstwa danych Map Google zapewnia kontener na dowolne dane geoprzestrzenne (w tym GeoJSON). Jeśli dane znajdują się w pliku hostowanym w tej samej domenie co aplikacja interfejsu 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 ze strony www.example.com.

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

Wczytywanie danych w różnych domenach

Możesz też poprosić o dane z innej domeny, jeśli jej konfiguracja na to pozwala. Standardem 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ć to oświadczenie:

Access-Control-Allow-Origin: *

Użyj Narzędzi deweloperskich w Chrome, aby sprawdzić, czy domena ma włączony CORS.

Wczytywanie danych z takiej domeny jest takie samo jak wczytywanie z niej pliku JSON:

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

Wysyłanie żądania JSONP

Aby korzystać z 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, czyli pierwszą nazwę na stronie po wczytaniu docelowego adresu URL w przeglądarce.

Na przykład wczytaj w oknie przeglądarki adres http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp, aby wyświetlić nazwę wywołania zwrotnego jako eqfeed_callback.

W kodzie musisz zdefiniować skrypt wywołania zwrotnego:

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

Aby umieścić przetworzone dane GeoJSON na mapie, użyj metody addGeoJson().

Importowanie obiektów geometrycznych GeoJSON

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

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

Jeśli np. 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ą granic), możesz też dodać nagłówek i stopkę, aby utworzyć prawidłowy format GeoJSON Feature przed przeanalizowaniem go za pomocą funkcji 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

Wygląd danych możesz zmienić, 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ż w przypadku GeoJSON. Więcej informacji znajdziesz w przewodniku dla programistów.
  • JSONP to skrót od padded JSON. Jest to metoda komunikacji używana w programach JavaScript działających w przeglądarkach internetowych do wysyłania żądań danych z serwera w innej domenie.