Google Maps API v.3 konvertieren Polylinie in Polygon mit gegebener Breite

Question

Ich bin auf der Suche nach der Art und Weise zum Konvertieren von Polylinie (erstellt von z. B. 2 Koordinaten) zu Polygon mit mindestens 4 Koordinaten. Ein einfacher Anwendungsfall ist der Luftweg auf der Luftfahrtkarte, er beginnt bei Punkt A, endet bei Punkt B und der Breite x nautische Meilen. Dummy-Code ist:

var someLine = new google.maps.Polyline({ 
    path: [ 
     {lat: 51.15, lng: 15}, 
     {lat: 51.15, lng: 18} 
    ], 
    geodesic: true, 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 5 
}); 
someLine.setMap(map); 

// how to convert above someLine into?: 
var airway = new google.maps.Polygon({ 
    paths: [ 
     {lat: 51, lng: 15}, 
     {lat: 51, lng: 18}, 
     {lat: 51.3, lng: 18}, 
     {lat: 51.3, lng: 15} 
    ], 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    geodesic: true 
}); 
airway.setMap(map); 

das wie folgt aussieht:

wo schwarze Linie ist üblich, Linienzug und roten Polygon gewünschten Effekt.

Ist eine API/ein Plugin für eine solche Aufgabe verfügbar oder muss ich die Ecken von Polygonen manuell berechnen?

Answer 1

Eine Option wäre, die zu verwenden, um Ihr Polygon basierend auf der Breite der Luftlinie und der Mittellinie zu berechnen. Wenn Sie die Breite der Luft Fahrspur in Meter angeben (statt nautische Meilen, die nur eine Konvertierung):

var lineWidth = 10000; // (meters) 
var lineHeading = google.maps.geometry.spherical.computeHeading(someLine.getPath().getAt(0), someLine.getPath().getAt(1)); 
var p0a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading+90); 
var p0b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading-90); 
var p1a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading+90); 
var p1b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading-90); 

var airway = new google.maps.Polygon({ 
    paths: [p0a, p0b, p1b, p1a], 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    geodesic: true 
}); 

Code-Schnipsel:

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var someLine = new google.maps.Polyline({ 
 
    path: [{ 
 
     lat: 51.15, 
 
     lng: 15 
 
    }, { 
 
     lat: 49.15, 
 
     lng: 18 
 
    }], 
 
    geodesic: true, 
 
    strokeColor: '#000000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 5 
 
    }); 
 
    someLine.setMap(map); 
 
    var lineWidth = 10000; // (meters) 
 
    var lineHeading = google.maps.geometry.spherical.computeHeading(someLine.getPath().getAt(0), someLine.getPath().getAt(1)); 
 
    var p0a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading + 90); 
 
    var p0b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading - 90); 
 
    var p1a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading + 90); 
 
    var p1b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading - 90); 
 

 

 
    // how to convert above someLine into?: 
 
    var airway = new google.maps.Polygon({ 
 
    paths: [p0a, p0b, p1b, p1a], 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 3, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    geodesic: true 
 
    }); 
 
    airway.setMap(map); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < airway.getPath().getLength(); i++) { 
 
    bounds.extend(airway.getPath().getAt(i)); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>