php - 使用 php 和 javascript 从 kml 文件创建高程图

Question

我正在尝试使用谷歌高程服务来创建这样的高程配置文件:

https://google-developers.appspot.com/maps/documentation/javascript/examples/elevation-paths

这是 Javascript:

var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;

// The following path marks a general path from Mt.
// Whitney, the highest point in the continental United
// States to Badwater, Death Vallet, the lowest point.
var whitney = new google.maps.LatLng(36.578581, -118.291994);
var lonepine = new google.maps.LatLng(36.606111, -118.062778);
var owenslake = new google.maps.LatLng(36.433269, -117.950916);
var beattyjunction = new google.maps.LatLng(36.588056, -116.943056);
var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
var badwater = new google.maps.LatLng(36.23998, -116.83171);

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

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: lonepine,
    mapTypeId: 'terrain'
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), 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 = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];

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

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

    // Display a polyline of the elevation path.
    var pathOptions = {
      path: elevationPath,
      strokeColor: '#0000CC',
      opacity: 0.4,
      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: 640,
      height: 200,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}

我有一个 KML 文件。它的内容是:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>test.kml</name>
    <Style id="inline10">
        <LineStyle>
            <color>ff0000ff</color>
            <width>2</width>
        </LineStyle>
        <PolyStyle>
            <fill>0</fill>
        </PolyStyle>
    </Style>
    <Style id="inline00">
        <LineStyle>
            <color>ff0000ff</color>
            <width>2</width>
        </LineStyle>
        <PolyStyle>
            <fill>0</fill>
        </PolyStyle>
    </Style>
    <StyleMap id="inline">
        <Pair>
            <key>normal</key>
            <styleUrl>#inline00</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#inline10</styleUrl>
        </Pair>
    </StyleMap>
    <Placemark>
        <name>4.6m run</name>
        <styleUrl>#inline</styleUrl>
        <LineString>
            <tessellate>1</tessellate>
            <coordinates>
                -118.3701083851859,33.86613514741887,0 -118.3835891373556,33.86595745112309,0 -118.3837603618944,33.86620604860725,0 -118.3860197295395,33.865106678845,0 -118.3853630075581,33.86344608835453,0 -118.392210401906,33.86235962069966,0 -118.3930072160544,33.86482879105449,0 -118.3952920372758,33.86473719683653,0 -118.3955064755973,33.86544254118038,0 -118.3978346563853,33.87119781418026,0 -118.4006823491955,33.8746256060688,0 -118.395927369356,33.8729025811578,0 -118.3929679702478,33.87284041135064,0 -118.3912963149097,33.87280457074664,0 -118.3873145130551,33.86670833356382,0 -118.3845601044409,33.86794790820593,0 -118.3840431481755,33.86710880429249,0 -118.3704571100188,33.86705385780814,0 
            </coordinates>
        </LineString>
    </Placemark>
</Document>
</kml>

google 开发人员博客上的示例根据特定的纬度和经度值创建了一条路径。我已经在“坐标”下的 kml 文件中有了这些值。我想创建一个显示海拔剖面图的图表。

此外，我能够使用“simplexml_load_file”解析 kml 文件以获取坐标字符串:

-118.3701083851859,33.86613514741887,0 -118.3835891373556,33.86595745112309,0 -118.3837603618944,33.86620604860725,0 -118.3860197295395,33.865106678845,0 -118.3853630075581,33.86344608835453,0 -118.392210401906,33.86235962069966,0 -118.3930072160544,33.86482879105449,0 -118.3952920372758,33.86473719683653,0 -118.3955064755973,33.86544254118038,0 -118.3978346563853,33.87119781418026,0 -118.4006823491955,33.8746256060688,0 -118.395927369356,33.8729025811578,0 -118.3929679702478,33.87284041135064,0 -118.3912963149097,33.87280457074664,0 -118.3873145130551,33.86670833356382,0 -118.3845601044409,33.86794790820593,0 -118.3840431481755,33.86710880429249,0 -118.3704571100188,33.86705385780814,0

我不知道我走的路对不对。

我想我需要更换这个

var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];

使用 KML 中的经纬度值。

我对 google api 还很陌生。任何帮助将不胜感激。

Answer 1

使用 geoxml3 解析 KML 文件，找到其中的第一个 LineString 并绘制该路径的高度:

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_elevation_linkto.html

使用 KML 文件中的路线:

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_elevation_linkto.html?filename=ShaunWright_kml.xml