Question

我想绘制一个20公里厚的环，里面有空的5公里圆圈。我不知道怎么做。我相信这是可能的。

一个简单的解决方案是从25km圆圈中减去一个5km的圆圈。可能吗？感谢您的任何提示。

Answer 1

创建drawCircle函数：

function drawCircle(point, radius, dir) { 
var d2r = Math.PI / 180;   // degrees to radians 
var r2d = 180 / Math.PI;   // radians to degrees 
var earthsradius = 3963; // 3963 is the radius of the earth in miles

   var points = 32; 

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


   var extp = new Array(); 
   if (dir==1)  {var start=0;var end=points+1} // one extra here makes sure we connect the
   else     {var start=points+1;var end=0}
   for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
   { 
      var theta = Math.PI * (i / (points/2)); 
      ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
      ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
      extp.push(new google.maps.LatLng(ex, ey)); 
      bounds.extend(extp[extp.length-1]);
   } 
   // alert(extp.length);
   return extp;
   }

然后你可以像这样使用它：

  var donut = new google.maps.Polygon({
                 paths: [drawCircle(new google.maps.LatLng(-33.9,151.2), 100, 1),
                         drawCircle(new google.maps.LatLng(-33.9,151.2), 50, -1)],
                 strokeColor: "#0000FF",
                 strokeOpacity: 0.8,
                 strokeWeight: 2,
                 fillColor: "#FF0000",
                 fillOpacity: 0.35
     });
     donut.setMap(map);

请注意，内圈需要与外圈相对“缠绕”。

Example (as posted by Dr Molle）

代码段

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

  // find the raidus in lat/lon 
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);


  var extp = new Array();
  if (dir == 1) {
    var start = 0;
    var end = points + 1
  } // one extra here makes sure we connect the
  else {
    var start = points + 1;
    var end = 0
  }
  for (var i = start;
    (dir == 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
  }
  // alert(extp.length);
  return extp;
}

var map = null;
var bounds = null;

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  bounds = new google.maps.LatLngBounds();

  var donut = new google.maps.Polygon({
    paths: [drawCircle(new google.maps.LatLng(-33.9, 151.2), 100, 1),
      drawCircle(new google.maps.LatLng(-33.9, 151.2), 50, -1)
    ],
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  donut.setMap(map);

  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"></script>
<div id="map_canvas"></div>

Answer 2

以下是使用几何库的geocodezip答案的略微修改版本：

function getCirclePoints(center, radius, numPoints, clockwise) {
    var points = [];
    for (var i = 0; i < numPoints; ++i) {
        var angle = i * 360 / numPoints;
        if (!clockwise) {
            angle = 360 - angle;
        }

        // the maps API provides geometrical computations
        // just make sure you load the required library (libraries=geometry)
        var p = google.maps.geometry.spherical.computeOffset(center, radius, angle);
        points.push(p);
    }

    // 'close' the polygon
    points.push(points[0]);
    return points;
}

你可以像这样使用它：

new google.maps.Polygon({
    paths: [
        getCirclePoints(yourCenter, outerRadius, numPoints, true),
        getCirclePoints(yourCenter, innerRadius, numPoints, false)
    ],
    /* other polygon options */
 });

修改：

几何API可以像这样添加到Node中（感谢Gil Epshtain）：

require('google-maps-api')(GOOGLE_API_KEY, ['geometry'])

当我写这篇文章时，我在HTML中使用了普通的旧JavaScript：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

有关详细信息，请参阅the API page of the geometry library。

Answer 3

好的，因此根据 geocodezip 的回答，我调整了该功能以在 Google 地图上绘制一个甜甜圈，以适应地图的失真。该函数根据中心点和半径计算圆的 360 个纬度/经度点。纬度/经度计算为方位（0 到 360 度/点）和距中心的距离。

fclose()

基于此，您可以使用以下函数绘制甜甜圈。

close()

以上示例以香港为中心，内圈半径为 5,000 公里，外圈半径为 9,000 公里。这应该产生一个这样的甜甜圈：

在Google Maps API中绘制圆环（不是圆圈）

3 个答案: