2
난 그냥이 같은 고도 프로파일을 작성 구글 고도 서비스를 사용하는 것을 시도하고있다
를 사용하여 KML 파일에서 고도 차트를 만들는 PHP와 자바 스크립트
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 파일의 "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
:
또한, 내가 얻을 "simplexml_load_file"를 사용하여 KML 파일을 구문 분석 할 수 있었다 문자열을 좌표입니다.
나는 내가 KML에서 위도, 경도 값은이
var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];
를 교체 할 필요가 있다고 생각합니다.
저는 Google API에 상당히 익숙합니다. 어떤 도움을 주시면 감사하겠습니다.