Сервис Elevation

Обзор

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

Объект ElevationService предоставляет вам простой интерфейс для запроса данных о высоте над местоположениями на Земле. Кроме того, вы можете запросить выборочные данные о высоте вдоль маршрутов, что позволит вам рассчитать равноудаленные изменения высоты вдоль маршрутов. Объект ElevationService взаимодействует со службой высот API Google Maps, которая получает запросы на повышение высоты и возвращает данные о высоте.

С помощью службы Elevation вы можете разрабатывать приложения для пеших и велосипедных прогулок, приложения для мобильного позиционирования или приложения для съемки с низким разрешением.

Начиная

Прежде чем использовать службу Elevation в Maps JavaScript API, сначала убедитесь, что Elevation API включен в Google Cloud Console в том же проекте, который вы настроили для Maps JavaScript API.

Чтобы просмотреть список включенных API:

  1. Перейдите в облачную консоль Google .
  2. Нажмите кнопку «Выбрать проект» , затем выберите тот же проект, который вы настроили для Maps JavaScript API, и нажмите « Открыть» .
  3. В списке API на информационной панели найдите Elevation API .
  4. Если вы видите API в списке, все готово. Если API нет в списке, включите его:
    1. В верхней части страницы выберите ВКЛЮЧИТЬ API , чтобы отобразить вкладку «Библиотека» . Либо в меню слева выберите «Библиотека» .
    2. Найдите Elevation API , затем выберите его из списка результатов.
    3. Выберите ВКЛЮЧИТЬ . Когда процесс завершится, Elevation API появится в списке API на информационной панели .

Ценообразование и политика

Цены

С 16 июля 2018 года вступил в силу новый тарифный план с оплатой по мере использования для Карт, Маршрутов и Мест. Дополнительные сведения о новых ценах и ограничениях на использование службы JavaScript Elevation см. в разделе Использование и выставление счетов для Elevation API.

Политика

Использование службы Elevation должно осуществляться в соответствии с политиками, описанными для API Elevation .

Запросы на повышение прав

Доступ к службе Elevation является асинхронным, поскольку API Карт Google необходимо выполнить вызов внешнего сервера. По этой причине вам необходимо передать метод обратного вызова для выполнения после завершения запроса. Этот метод обратного вызова должен обрабатывать результаты. Обратите внимание, что служба ElevationResult возвращает код состояния ( ElevationStatus ) и массив отдельных объектов ElevationResult .

ElevationService обрабатывает два типа запросов:

  • Запросы отдельных дискретных местоположений с использованием метода getElevationForLocations() , которому передается список из одного или нескольких местоположений с помощью объекта LocationElevationRequest .
  • Запросы на повышение высоты для ряда соединенных точек вдоль пути с использованием метода getElevationAlongPath() , которому передается упорядоченный набор вершин пути в объекте PathElevationRequest . При запросе отметок по путям вы также должны передать параметр, указывающий, сколько образцов вы хотите взять по этому пути.

Каждый из этих методов также должен передавать метод обратного вызова для обработки возвращаемых объектов ElevationResult и ElevationStatus .

Запросы на повышение местоположения

Литерал объекта LocationElevationRequest содержит следующее поле:

{
  locations[]: LatLng
}

locations (обязательно) определяет местоположение(я) на земле, из которого возвращаются данные о высоте. Этот параметр принимает массив LatLng s.

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

Примеры запросов на повышение уровня пути

Литерал объекта PathElevationRequest содержит следующие поля:

{
  path[]: LatLng,
  samples: Number
}

Эти поля описаны ниже:

  • path (обязательный) определяет путь на земле, для которого возвращаются данные о высоте. Параметр path определяет набор из двух или более упорядоченных пар {широта, долгота} с использованием массива из двух или более объектов LatLng .
  • samples (обязательный) указывает количество точек выборки вдоль пути, для которого возвращаются данные о высоте. Параметр samples делит заданный path на упорядоченный набор равноудаленных точек вдоль пути.

Как и в случае с позиционными запросами, параметр path указывает набор значений широты и долготы. Однако в отличие от позиционного запроса path указывает упорядоченный набор вершин. Вместо возврата данных о высоте в вершинах запросы пути отбираются по длине пути , где каждая выборка находится на равном расстоянии друг от друга (включая конечные точки).

Реакция на высоту

Для каждого действительного запроса служба Elevation вернет в определенный обратный вызов набор объектов ElevationResult вместе с объектом ElevationStatus .

Статусы повышения

Каждый запрос на повышение прав возвращает код ElevationStatus в своей функции обратного вызова. Этот код status будет содержать одно из следующих значений:

  • OK , что означает, что запрос на обслуживание был успешным
  • INVALID_REQUEST указывает на то, что запрос на обслуживание имеет неправильный формат.
  • OVER_QUERY_LIMIT указывающий, что запрашивающая сторона превысила квоту
  • REQUEST_DENIED указывает, что служба не завершила запрос, вероятно, из-за недопустимого параметра.
  • UNKNOWN_ERROR указывает на неизвестную ошибку.

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

Результаты высот

В случае успеха аргумент results вашей функции обратного вызова будет содержать набор объектов ElevationResult . Эти объекты содержат следующие элементы:

  • Элемент location (содержащий объекты LatLng ) положения, для которого вычисляются данные о высоте. Обратите внимание, что для запросов пути набор элементов location будет содержать выбранные точки вдоль пути.
  • Элемент elevation , указывающий высоту местоположения в метрах.
  • Значение resolution , указывающее максимальное расстояние между точками данных, из которых была интерполирована высота, в метрах. Это свойство будет отсутствовать, если разрешение неизвестно. Обратите внимание, что данные о высоте становятся более грубыми (большие значения resolution ) при прохождении нескольких точек. Чтобы получить наиболее точное значение высоты для точки, его следует запросить независимо.

Примеры высот

Следующий код преобразует щелчок по карте в запрос на повышение уровня с помощью объекта LocationElevationRequest :

Машинопись 

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: { lat: 63.333, lng: -150.5 }, // Denali.
      mapTypeId: "terrain",
    }
  );
  const elevator = new google.maps.ElevationService();
  const infowindow = new google.maps.InfoWindow({});

  infowindow.open(map);

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener("click", (event) => {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(
  location: google.maps.LatLng,
  elevator: google.maps.ElevationService,
  infowindow: google.maps.InfoWindow
) {
  // Initiate the location request
  elevator
    .getElevationForLocations({
      locations: [location],
    })
    .then(({ results }) => {
      infowindow.setPosition(location);

      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent(
          "The elevation at this point <br>is " +
            results[0].elevation +
            " meters."
        );
      } else {
        infowindow.setContent("No results found");
      }
    })
    .catch((e) =>
      infowindow.setContent("Elevation service failed due to: " + e)
    );
}

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

JavaScript 

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: { lat: 63.333, lng: -150.5 }, // Denali.
    mapTypeId: "terrain",
  });
  const elevator = new google.maps.ElevationService();
  const infowindow = new google.maps.InfoWindow({});

  infowindow.open(map);
  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener("click", (event) => {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator
    .getElevationForLocations({
      locations: [location],
    })
    .then(({ results }) => {
      infowindow.setPosition(location);
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent(
          "The elevation at this point <br>is " +
            results[0].elevation +
            " meters.",
        );
      } else {
        infowindow.setContent("No results found");
      }
    })
    .catch((e) =>
      infowindow.setContent("Elevation service failed due to: " + e),
    );
}

window.initMap = initMap;
index.js
Посмотреть пример

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

В следующем примере создается полилиния по заданному набору координат и отображаются данные о высоте вдоль этого пути с помощью API визуализации Google . (Вы должны загрузить этот API с помощью Google Common Loader.) Запрос на повышение прав создается с использованием PathElevationRequest :

Машинопись 

// Load the Visualization API and the columnchart package.
// @ts-ignore TODO update to newest visualization library
google.load("visualization", "1", { packages: ["columnchart"] });

function initMap(): void {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  const path = [
    { lat: 36.579, lng: -118.292 }, // Mt. Whitney
    { lat: 36.606, lng: -118.0638 }, // Lone Pine
    { lat: 36.433, lng: -117.951 }, // Owens Lake
    { lat: 36.588, lng: -116.943 }, // Beatty Junction
    { lat: 36.34, lng: -117.468 }, // Panama Mint Springs
    { lat: 36.24, lng: -116.832 },
  ]; // Badwater, Death Valley

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: path[1],
      mapTypeId: "terrain",
    }
  );

  // Create an ElevationService.
  const elevator = new google.maps.ElevationService();

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(
  path: google.maps.LatLngLiteral[],
  elevator: google.maps.ElevationService,
  map: google.maps.Map
) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: "#0000CC",
    strokeOpacity: 0.4,
    map: map,
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator
    .getElevationAlongPath({
      path: path,
      samples: 256,
    })
    .then(plotElevation)
    .catch((e) => {
      const chartDiv = document.getElementById(
        "elevation_chart"
      ) as HTMLElement;

      // Show the error code inside the chartDiv.
      chartDiv.innerHTML = "Cannot show elevation: request failed because " + e;
    });
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation({ results }: google.maps.PathElevationResponse) {
  const chartDiv = document.getElementById("elevation_chart") as HTMLElement;

  // Create a new chart in the elevation_chart DIV.
  const chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  const data = new google.visualization.DataTable();

  data.addColumn("string", "Sample");
  data.addColumn("number", "Elevation");

  for (let i = 0; i < results.length; i++) {
    data.addRow(["", results[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: "none",
    // @ts-ignore TODO update to newest visualization library
    titleY: "Elevation (m)",
  });
}

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

JavaScript 

// Load the Visualization API and the columnchart package.
// @ts-ignore TODO update to newest visualization library
google.load("visualization", "1", { packages: ["columnchart"] });

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  const path = [
    { lat: 36.579, lng: -118.292 }, // Mt. Whitney
    { lat: 36.606, lng: -118.0638 }, // Lone Pine
    { lat: 36.433, lng: -117.951 }, // Owens Lake
    { lat: 36.588, lng: -116.943 }, // Beatty Junction
    { lat: 36.34, lng: -117.468 }, // Panama Mint Springs
    { lat: 36.24, lng: -116.832 },
  ]; // Badwater, Death Valley
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: path[1],
    mapTypeId: "terrain",
  });
  // Create an ElevationService.
  const elevator = new google.maps.ElevationService();

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: "#0000CC",
    strokeOpacity: 0.4,
    map: map,
  });
  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator
    .getElevationAlongPath({
      path: path,
      samples: 256,
    })
    .then(plotElevation)
    .catch((e) => {
      const chartDiv = document.getElementById("elevation_chart");

      // Show the error code inside the chartDiv.
      chartDiv.innerHTML = "Cannot show elevation: request failed because " + e;
    });
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation({ results }) {
  const chartDiv = document.getElementById("elevation_chart");
  // Create a new chart in the elevation_chart DIV.
  const chart = new google.visualization.ColumnChart(chartDiv);
  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  const data = new google.visualization.DataTable();

  data.addColumn("string", "Sample");
  data.addColumn("number", "Elevation");

  for (let i = 0; i < results.length; i++) {
    data.addRow(["", results[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: "none",
    // @ts-ignore TODO update to newest visualization library
    titleY: "Elevation (m)",
  });
}

window.initMap = initMap;
index.js
Посмотреть пример

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