Импортируйте данные GeoJSON в карты

Обзор

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

В разделе ниже представлен весь код, необходимый для создания карты в этом руководстве.

Машинопись 

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

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;
index.js

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

style.css

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>
index.html

Попробуйте образец

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

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

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

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

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

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

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

Access-Control-Allow-Origin: *

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

Загрузка данных с такого домена аналогична загрузке 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);
}

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

Оформление данных

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

Узнать больше

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