Usługa wzniesienia

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Omówienie

Usługa wysokości względnej dostarcza danych o wysokości dla lokalizacji na powierzchni ziemi, w tym głębokości lokalizacji na dnie oceanu (które zwracają wartości ujemne). W takich przypadkach, gdy Google nie ma dokładnego pomiaru wysokości we dokładnej lokalizacji, której dotyczy żądanie, usługa interpoluje i zwraca średnią wartość z użyciem 4 najbliższych lokalizacji.

Obiekt ElevationService oferuje prosty interfejs do wysyłania zapytań o lokalizacje na Ziemi w celu uzyskania danych o wysokości. Dodatkowo można poprosić o przykładowe dane wysokości na ścieżkach, aby obliczyć zmiany wysokości względnej na trasach. Obiekt ElevationService komunikuje się z usługą wysokości względnej interfejsu API Map Google, która otrzymuje żądania podniesienia i zwraca dane o wysokości.

Dzięki usłudze Elevation możesz tworzyć aplikacje do turystyki pieszej i rowerowej, aplikacje do pozycjonowania na urządzeniach mobilnych lub aplikacje do prowadzenia ankiet o niskiej rozdzielczości.

Pierwsze kroki

Zanim użyjesz interfejsu Elevation API w Maps JavaScript API, musisz upewnić się, że interfejs Elevation API jest włączony w Google Cloud Console w tym samym projekcie, który został skonfigurowany dla Maps JavaScript API.

Aby wyświetlić listę włączonych interfejsów API:

  1. Otwórz Google Cloud Console.
  2. Kliknij przycisk Wybierz projekt, a następnie wybierz ten sam projekt, który został skonfigurowany dla interfejsu API JavaScript Map Google, a następnie kliknij Otwórz.
  3. Na liście interfejsów API w panelu znajdź Elevation API.
  4. Jeśli na liście znajduje się interfejs API, nie musisz nic więcej robić. Jeśli interfejsu API nie ma na liście, włącz go:
    1. U góry strony wybierz ENABLE API, aby wyświetlić kartę Biblioteka. Możesz też wybrać w menu po lewej stronie Bibliotekę.
    2. Wyszukaj Elevation API, a następnie wybierz go z listy wyników.
    3. Wybierz WŁĄCZ. Gdy proces dobiegnie końca, interfejs Elevation API pojawi się na liście interfejsów API w panelu.

Ceny i zasady

cenę,

Od 16 lipca 2018 roku w Mapach, trasach i miejscach jest stosowany nowy, płatny abonament. Więcej informacji o nowych limitach cenowych i limitów dotyczących korzystania z usługi JavaScript Elevation znajdziesz w artykule na temat użycia i rozliczeń w interfejsie Elevation API.

Zasady

Korzystanie z usługi Elevation musi być zgodne z zasadami opisanymi w interfejsie Elevation API.

Prośby o podniesienie

Dostęp do usługi Elevation jest asynchroniczny, ponieważ interfejs API Map Google wymaga wywoływania serwera zewnętrznego. Z tego powodu musisz przekazać metodę wywołania zwrotnego do wykonania po zakończeniu żądania. Ta metoda wywołania zwrotnego powinna przetworzyć wyniki. Usługa wysokości względnej zwraca kod stanu (ElevationStatus) i tablicę osobnych obiektów ElevationResult.

ElevationService obsługuje 2 typy żądań:

  • Żądania dotyczące oddzielnych, odrębnych lokalizacji za pomocą metody getElevationForLocations(), która przekazuje listę co najmniej 1 lokalizacji za pomocą obiektu LocationElevationRequest.
  • Prośby o wysokość w serii połączonych punktów na ścieżce przy użyciu metody getElevationAlongPath(), która jest przekazywana w porządku zestawu wierzchołów w obiekcie PathElevationRequest. Wysyłając prośbę o wysokość, musisz też przekazać parametr określający, ile próbek chcesz przeprowadzić na tej ścieżce.

Każda z tych metod musi też przekazywać metodę wywołania zwrotnego, by obsłużyć zwrócone obiekty ElevationResult i ElevationStatus.

Prośby o podniesienie lokalizacji

Literał obiektu LocationElevationRequest zawiera to pole:

{
  locations[]: LatLng
}

locations (wymagany) określa lokalizacje na Ziemi, z których mają być zwracane dane wysokości. Ten parametr przyjmuje tablicę LatLng.

W tablicy możesz przekazywać dowolną liczbę wielu współrzędnych, o ile nie przekroczysz limitów usługi. Pamiętaj, że w przypadku przesyłania wielu współrzędnych dokładność zwracanych danych może być niższa niż w przypadku żądań danych dotyczących jednej współrzędnej.

Prośby o wzniesienie ścieżki przykładowej

Literał obiektu PathElevationRequest zawiera te pola:

{
  path[]: LatLng,
  samples: Number
}

Te pola zostały omówione poniżej:

  • path (wymagany) określa ścieżkę na poziomie Ziemi, dla której mają być zwracane dane wysokości. Parametr path definiuje zestaw obejmujący co najmniej 2 uporządkowane pary {width,length} za pomocą tablicy obejmującej co najmniej 2 obiekty LatLng.
  • samples (wymagany) określa liczbę przykładowych punktów na ścieżce, dla których mają być zwracane dane wysokości. Parametr samples dzieli podany path na zbiór uporządkowanych punktów na ścieżce.

Tak jak w przypadku żądań pozycjonowania, parametr path określa zestaw wartości szerokości i długości geograficznej. W przeciwieństwie do żądania pozycjonowania path wskazuje jednak uporządkowany zestaw wierzchołków. Zamiast zwracać dane o wysokości w wierzchołkach, żądania dotyczące próbek są próbkowane wzdłuż długości ścieżki, gdzie każda próbka jest oddalona od siebie (w tym punktów końcowych).

Reakcje na wysokość

W przypadku każdego prawidłowego żądania usługa Elevator powróci do zdefiniowanego wywołania zwrotnego zestawu obiektów ElevationResult wraz z obiektem ElevationStatus.

Stany wysokości

Każde żądanie wysokości zwraca kod stanu ElevationStatus w funkcji wywołania zwrotnego. Ten kod status zawiera jedną z tych wartości:

  • OK wskazuje, że żądanie usługi zostało zrealizowane
  • INVALID_REQUEST wskazuje, że żądanie usługi było nieprawidłowo sformułowane
  • Wartość OVER_QUERY_LIMIT wskazuje, że żądający przekroczył limit
  • REQUEST_DENIED oznacza, że usługa nie spełniła żądania, prawdopodobnie z powodu nieprawidłowego parametru
  • UNKNOWN_ERROR oznacza nieznany błąd

Aby sprawdzić, czy wywołanie zwrotne zakończyło się powodzeniem, przeanalizuj ten kod stanu w OK.

Wyniki wysokości

Po sukcesie argument results funkcji wywołania zwrotnego będzie zawierał zbiór obiektów ElevationResult. Obiekty te zawierają następujące elementy:

  • Element location (zawierający obiekty LatLng) pozycji, dla których są obliczane dane wysokości. W przypadku żądań ścieżki zestaw elementów location będzie zawierał próbkowane punkty na ścieżce.
  • Element elevation określający wysokość lokalizacji w metrach.
  • Wartość resolution wskazująca Maksymalna odległość między punktami danych, od której wysokość została interpolowana. Jeśli nie znamy rozwiązania, brakuje tej właściwości. Dane o wysokości powiększone (o większej wartości resolution) stają się przybliżone po przekroczeniu wielu punktów. Aby uzyskać najdokładniejsze wartości wysokości, należy je wykonywać niezależnie.

Przykłady wysokości

Ten kod przekłada kliknięcie mapy na żądanie wysokości, używając obiektu LocationElevationRequest:

TypeScript

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 },
    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
Zobacz przykład

Fragment

Podany niżej przykład tworzy linię łamaną dla zbioru współrzędnych i wyświetla dane o wysokości na tej ścieżce przy użyciu interfejsu GoogleWizualizacj API. (musisz wczytać ten interfejs API za pomocą programu Google Common Loader). Prośba o podniesienie jest tworzona za pomocą PathElevationRequest:

TypeScript

// 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 },
    { lat: 36.606, lng: -118.0638 },
    { lat: 36.433, lng: -117.951 },
    { lat: 36.588, lng: -116.943 },
    { lat: 36.34, lng: -117.468 },
    { 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
Zobacz przykład

Fragment