根据折线坐标数组创建高程剖面图

Create Elevation profile from polyline coordinate array

本文关键字：创建 高程 剖面图 数组 坐标 折线      更新时间：2023-09-26

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

尽管制作该线的第一种（也可能是最糟糕的）方法只是一个巨大的纬度/液化天然气点列表。仍在学习编程技巧，我很抱歉。 我是地理学家不是程序员！

我想从该线获取高程并创建一个高程剖面图。我是JS的新手，不确定如何调试不起作用的内容。 我似乎无法使用折线的坐标填充路径数组。

它目前设置为将 bikeCourseT坐标推送到一个新的数组，然后用作路径。 我尝试只是使用 bikeCourseT坐标数组作为"路径"，但这也不起作用。

在线（但不是工作版本）在这里：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

如果是，我已经做到了，但没有图表效果

这是我的代码

这在你的脑海里

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&amp;v=1&amp;packages=columnchart" type="text/javascript"

这在正文标签之前的页脚中

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

我找不到问题，但这里有一些观察可能会有所帮助：

I tried it just using the bikeCourseCoordinates array as the 'path'

根据地图API，pathRequest应该是：

var pathRequest = {
    'path': bikeCourseCoordinates,
    'samples': 256
}

此外，我认为以下初始部分，即：

var whitney = new google.maps.LatLng(36.578581, -118.291994);
...
...
var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
var badwater = new google.maps.LatLng(36.23998, -116.83171);
var bikeCourseCoordinates = [
            new google.maps.LatLng(47.67609435030702, -116.7896032333374),

直接位于第一个内联<script>标记中，应仅在加载地图库后调用。 我会把它全部放到另一个函数中，比如myInit，然后从你当前名为initialize的函数中调用myInit

上述原因是，尽管您包含脚本标记以包含maps api maps.googleapis.com/maps/api/js?sensor=false但浏览器将继续执行包含whitney= new google.maps.Lat的下一个脚本块 maps.googleapis.com 因为这是一个外部脚本，我认为这些外部脚本是异步加载的。

相关文章：