Как импортировать данные GeoJSON в Карты

Обзор

Из этой статьи вы узнаете, как импортировать данные GeoJSON из локального или удаленного источника и показывать их на карте. Для иллюстрации методов импорта данных мы будем использовать этот пример карты:

Ниже приведен полный программный код для создания такой карты.

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>

Загрузка данных

В этом разделе описано, как настроить загрузку данных из того же домена, что и ваше приложение на Maps JavaScript API, или из любого другого.

Загрузка данных из одного домена

Слой Google Maps Data – это контейнер для произвольных геопространственных данных, например GeoJSON. Если данные находятся в том же домене, что и ваше приложение на Maps JavaScript API, то их можно загрузить с помощью метода map.data.loadGeoJson(). При этом файл и приложение могут находиться в разных поддоменах. Например, вы можете делать запросы к files.example.com из www.example.com.

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

Загрузка данных из разных доменов

Запросить данные из другого домена можно, если его конфигурация разрешает такие запросы. Стандартом разрешений является технология CORS (совместное использование ресурсов между разными источниками). Если запросы из других доменов разрешены, заголовок ответа на запрос в домен должен включать следующую декларацию:

Access-Control-Allow-Origin: *

Проверить, включена ли для домена технология CORS, можно с помощью Инструментов разработчика в Chrome (DevTools).

Загрузка данных происходит точно так же, как загрузка JSON из того же домена:

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

Запросы JSONP

Для работы с этим методом целевой домен должен поддерживать запросы JSONP.

Чтобы запросить JSONP, используйте createElement() для добавления тега script в заголовок своего документа.

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

При выполнении скрипта целевой домен передает данные другому скрипту в виде аргумента, обычно с именем callback(). Целевой домен определяет имя скрипта обратного вызова, которым является первое имя на странице при загрузке целевого URL-адреса в браузере.

В качестве примера откройте в браузере файл http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp, чтобы посмотреть имя обратного вызова (eqfeed_callback).

Скрипт обратного вызова необходимо определить в коде:

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

Для отрисовки данных из GeoJSON на карте используйте метод addGeoJson().

Импорт геометрических объектов GeoJSON

Метод map.data.addGeoJson() требует наличия объекта Feature или FeatureCollection, полученного в результате синтаксического анализа GeoJSON. Он не принимает отдельные геометрические объекты GeoJSON (Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon или GeometryCollection).

Если источник данных или ответ API возвращает отдельный геометрический объект GeoJSON без оболочки "type": "Feature" верхнего уровня, перед вызовом map.data.addGeoJson() необходимо обернуть его в объект Feature.

Например, если геометрия (такая как Polygon) является обработанным объектом JavaScript, оберните ее в объект 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);

Если геометрия возвращается в виде строки в формате JSON (например, поле polygon, возвращаемое оповещением о погоде или ответом о границах), вы также можете добавить заголовок и нижний колонтитул, чтобы сформировать действительный объект GeoJSON Feature, прежде чем анализировать его с помощью JSON.parse():

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

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

Подробнее о том, как работать с геометрическими фигурами и многоугольниками на уровне данных, рассказывается в руководстве для разработчиков по уровню данных.

Стилизация данных

Добавляя данные GeoJSON в объект Map, вы можете изменять внешний вид карты. Подробная информация об этом приведена в руководстве для разработчиков.

Дополнительная информация

  • GeoJSON – это популярный открытый формат кодирования географических данных на основе JSON (JavaScript Object Notation). Инструменты и методы JavaScript, предназначенные для данных JSON, работают и с GeoJSON. Подробная информация об этом приведена в руководстве для разработчиков.
  • Формат JSONP также называют JSON с набивкой (от англ. "padded JSON"). Этот метод связи применяется в браузерных программах JavaScript для запроса данных с сервера в другом домене.