Google Maps API v.3將多段線轉換爲給定寬度的多邊形

Question

我正在尋找將多段線（即從2個座標創建）轉換爲包含至少4個座標的多邊形的方法。簡單的使用案例是航空地圖上的航空公司，它從A點開始，在B點結束，寬度爲x海里。僞代碼是：

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

它看起來像：

其中黑線是常見的折線和紅色多邊形預期的效果。

是否有任何API /插件可用於這樣的任務或我需要手動計算多邊形的角？

Answer 1

一種選擇是使用Google Maps Javascript API v3 geometry library根據氣道寬度和中心線計算多邊形。如果指定用米的空中通道的寬度（而不是海里，這僅僅是一個轉換）：

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

代碼片段：

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>