Question

我们的想法是使用角度绘制以特定点为中心的圆弧。注意：不是和弦，也不是扇区，也不是和弦和弧之间的区域。

纪念品：http://en.wikipedia.org/wiki/Arc_(geometry)

完整的圆圈参数：

- center at coordinates LatC,LngC
- radius of 1 609 meters
- start angle of 0 degrees
- end angle of 360 degrees

示例http://jsfiddle.net/GGvQH/3/

new google.maps.Circle({
    center: new google.maps.LatLng(18.4894, 73.910158),
    radius: 1609,
    ...
});

朝北的180°弧（PI / 2辐射）将如下：

 - center at coordinates LatC,LngC
 - radius of 1 609 meters
 - start angle of 270 degrees (9 o'clock)
 - end angle of 90 degrees (3 o'clock)

首先，我不想为每个弧绘制折线，使用大量的点来获得平滑的效果：需要重新计算每个比例并且可能需要资源......或者是它？

有一个多边形相交的想法 Google Maps API v3 - circle sector ...有没有人见过一个工作的jsfiddle？注意：http://jsfiddle.net/Morlock0821/4dRB2/1/非常靠近弧线，但我不想要一个封闭的曲面。

另一个有承受力的想法...但我不愿意重新定义地球的半径以获得我想要的微小弧度。 https://developers.google.com/maps/documentation/javascript/examples/geometry-headings （在这种情况下，我只想要紫色线，而不是红色线。）

非常感谢任何帮助。

Answer 1

这是我在this example中使用的代码：

function drawArc(center, initialBearing, finalBearing, radius) { 
  var d2r = Math.PI / 180;   // degrees to radians 
  var r2d = 180 / Math.PI;   // radians to degrees 

  var points = 32; 

  // find the raidus in lat/lon 
  var rlat = (radius / EarthRadiusMeters) * r2d; 
  var rlng = rlat / Math.cos(center.lat() * d2r); 

  var extp = new Array();

  if (initialBearing > finalBearing) finalBearing += 360;
  var deltaBearing = finalBearing - initialBearing;
  deltaBearing = deltaBearing/points;
  for (var i=0; (i < points+1); i++) 
  { 
    extp.push(center.DestinationPoint(initialBearing + i*deltaBearing, radius)); 
    bounds.extend(extp[extp.length-1]);
  } 
  return extp;
}

像这样使用，其中startPoint是弧的起点，endPoint是弧的终点，centerPoint是中心，但是你可以指定中心，角度和半径。

var arcPts = drawArc(centerPoint, centerPoint.Bearing(startPoint), centerPoint.Bearing(endPoint), centerPoint.distanceFrom(startPoint));


var piePoly = new google.maps.Polygon({
             paths: [arcPts],
             strokeColor: "#00FF00",
             strokeOpacity: 0.5,
             strokeWeight: 2,
             fillColor: "#FF0000",
             fillOpacity: 0.35,
             map: map
 });

如果包含geometry library

，则可能不再需要辅助功能

var EarthRadiusMeters = 6378137.0; // meters
/* Based the on the Latitude/longitude spherical geodesy formulae & scripts
   at http://www.movable-type.co.uk/scripts/latlong.html
   (c) Chris Veness 2002-2010
*/ 
google.maps.LatLng.prototype.DestinationPoint = function (brng, dist) {
var R = EarthRadiusMeters; // earth's mean radius in meters
var brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin( Math.sin(lat1)*Math.cos(dist/R) + 
                      Math.cos(lat1)*Math.sin(dist/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(dist/R)*Math.cos(lat1), 
                             Math.cos(dist/R)-Math.sin(lat1)*Math.sin(lat2));

return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}

// === A function which returns the bearing between two LatLng in radians ===
// === If v1 is null, it returns the bearing between the first and last vertex ===
// === If v1 is present but v2 is null, returns the bearing from v1 to the next vertex ===
// === If either vertex is out of range, returns void ===
google.maps.LatLng.prototype.Bearing = function(otherLatLng) {
  var from = this;
  var to = otherLatLng;
  if (from.equals(to)) {
    return 0;
  }
  var lat1 = from.latRadians();
  var lon1 = from.lngRadians();
  var lat2 = to.latRadians();
  var lon2 = to.lngRadians();
  var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
  if ( angle < 0.0 ) angle  += Math.PI * 2.0;
  if ( angle > Math.PI ) angle -= Math.PI * 2.0; 
  return parseFloat(angle.toDeg());
}


/**
 * Extend the Number object to convert degrees to radians
 *
 * @return {Number} Bearing in radians
 * @ignore
 */ 
Number.prototype.toRad = function () {
  return this * Math.PI / 180;
};

/**
 * Extend the Number object to convert radians to degrees
 *
 * @return {Number} Bearing in degrees
 * @ignore
 */ 
Number.prototype.toDeg = function () {
  return this * 180 / Math.PI;
};

/**
 * Normalize a heading in degrees to between 0 and +360
 *
 * @return {Number} Return 
 * @ignore
 */ 
Number.prototype.toBrng = function () {
  return (this.toDeg() + 360) % 360;
};

在谷歌地图上绘制圆弧

1 个答案: