Google Maps API v.3 将折线转换为具有给定宽度的多边形答案

【问题标题】：Google Maps API v.3 convert polyline into polygon with given widthGoogle Maps API v.3 将折线转换为具有给定宽度的多边形
【发布时间】：2016-04-22 16:47:49
【问题描述】：

我正在寻找将折线（从即 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/插件可用于此类任务，或者我需要手动计算多边形的角？

【问题讨论】：

你必须手动计算..谷歌地图没有“缓冲”功能
但是您出于某种原因需要一个区域，或者只是需要一条宽线？
如图所示：我有一条黑线，给定宽度为 x 海里，我需要将其转换为覆盖折线路径 + 此宽度的红色多边形
在官方文档中，航线被描述为从 A 到 B 的线，宽度为 x 英里，我需要在地图上显示它
那你需要一个真实的区域..我明白..

标签： google-maps google-maps-api-3

【解决方案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
});

代码 sn-p：

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>

【讨论】：