从多段线坐标数组创建高程剖面 [英] Create Elevation profile from polyline coordinate array

问题描述

我使用坐标数组创建了一条多段线，其代码来自
https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple

I have created a polyline using a coordinate array with code adapted from https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple

虽然第一个（也许最差）的方法，使线只是一个巨大的经济/经济援助点列表。我仍然在学习编程技巧，我很抱歉。我是一名地理学家，不是程序员！

Although the first (and probably worst) method to make the line was just a huge list of lat/lng points. Still learning the programming tricks, I apologize. Im a geographer not a programmer!

我想从该行获取高程并创建高程剖面图。
我新来JS，不知道如何调试什么不工作。我似乎无法用折线中的坐标来填充路径数组。

I want to get the elevation from that line and create an elevation profile graph. Im new to JS and not sure how to debug whats not working. I cant seem to populate the path array with the coordinates from the polyline.

它目前设置为将bikeCourseCoordinates推到一个新的数组中，然后将其用作路径。我尝试了使用bikeCourseCoordinates数组作为'路径'，但这也没有效果。

Its currently set to push the bikeCourseCoordinates to a new array that will then be used as a path. I tried it just using the bikeCourseCoordinates array as the 'path' but that didnt work either.

在线（但不是工作版本）在这里：
http://geography.uoregon.edu:50000/bentesting/map_try3.html

Online (but not working version) here: http://geography.uoregon.edu:50000/bentesting/map_try3.html

function drawPath() {

  // Create a new chart in the elevation_chart DIV.
  chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));

  var path = new Array;
  path.push(bikeCourseCoordinates);


  // Create a PathElevationRequest object using this array.
  var pathRequest = {
    'path': path,
    'samples': 256
  }

  // Initiate the path request.
  elevator.getElevationAlongPath(pathRequest, plotElevation);
}

// 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, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < results.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // 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.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation_chart').style.display = 'block';
    chart.draw(data, {
      width: 640,
      height: 200,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}

推荐答案

你试图在该页面上重现第三个例子？ https://developers.google.com/maps/customize

Are you trying to reproduce the third exemple on that page ? https://developers.google.com/maps/customize

如果是的话，我已经做了，但没有图表超过效果

If yes i have done it but without the graph over effects

这里是我的代码

这在你的脑袋里

script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"
script type="text/javascript" src="https://www.google.com/jsapi"
script src="https://www.google.com/uds/?file=visualization&v=1&packages=columnchart" type="text/javascript"

，并且在body标签之前的页脚中

and this in the footer just before body tag

var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;
var mapCenter = new google.maps.LatLng(-21.745585792425,165.91141052497);


// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {packages: ["columnchart"]});


function initialize() {
    var mapOptions = {
        center: mapCenter,
        zoom: 13,
        mapTypeId: 'terrain'
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

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

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


function drawPath() {

    // Create a new chart in the elevation_chart DIV.
    chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));

    var path = bikeCourseCoordinates;

    // Create a PathElevationRequest object using this array.
    // Ask for 256 samples along that path.
    var pathRequest = {
        'path': path,
        'samples': 256
    }

    // Initiate the path request.
    elevator.getElevationAlongPath(pathRequest, plotElevation);
}



function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < results.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // Display a polyline of the elevation path.
    var pathOptions = {
      path: elevationPath,
      strokeColor: '#0000CC',
      opacity: 0.9,
      map: map
    }
    polyline = new google.maps.Polyline(pathOptions);

    // 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.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation-chart').style.display = 'block';
    chart.draw(data, {
      width: 960,
      height: 300,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}



initialize();

这篇关于从多段线坐标数组创建高程剖面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！