logo标签列表

在Google Maps API中绘制环形（而非圆形）。

google-mapsgoogle-maps-api-3
3
我希望绘制一个厚度为20公里的环，其中有一个直径为空的5公里圆形。我不知道该如何实现，但我相信这是可能的。
一个简单的解决方案可能是从25公里的圆形中减去一个5公里的圆形。这是否可行？谢谢任何提示。
3
请查看 http://www.geocodezip.com/v3_polygon_example_donut.html。 - Dr.Molle
@Dr.Molle，但那是多边形，不是圆形。 - Tomas
是的，只有多边形才可能存在孔洞，因为您必须使用两个方向相反的路径，但对于圆形没有路径。相反，您可以使用填充完全透明的圆形，其中描边定义了环（您必须在初始时和每次缩放更改时重新计算描边的权重）。 - Dr.Molle
4个回答
6
创建一个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);

请注意，内圆需要与外圆“相反地”旋转。

示例（由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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

甜甜圈在小规模上运作良好，但在大规模使用时，它会呈现完全错误的形状。假设您用外径为9000公里和内径为500公里的尺寸绘制一个甜甜圈，那么甜甜圈应该有一个内圆，但外形将横跨北极并覆盖欧洲和阿拉斯加/加拿大的一大部分。从中创建的甜甜圈与实际不符。 - Matth
地球不是平的。这个函数在地面上画一个圆，地图投影会扭曲它（对于更大的圆，以及在更高纬度处扭曲更多，在赤道附近则较少）。 - geocodezip
有没有办法纠正这个问题？当我使用google.maps.Circle绘制一个圆时，它会自动纠正失真。 - Matth
取决于您想要什么（或者所谓的“正确”是什么意思）。如果您想要在地图上看起来是圆形但实际上不是圆形的东西，那么可以做到，但这是一个不同的问题。 - geocodezip
1
这是一个稍微修改过的geocodezip答案，使用了geometry库：
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">

如需更多信息，请参考几何库的API页面。

添加 "maps.geometry" 库是您解决方案中最困难的部分。 - Gil Epshtain
1
在NPM环境中使用以下语法添加“geometry”库：let mapsApi = require('google-maps-api')(GOOGLE_API_KEY, ['geometry']); - Gil Epshtain
0

好的，根据geocodezip的回答，我调整了函数以在Google Maps上绘制甜甜圈，以适应地图的扭曲。该函数基于中心点和半径计算圆形的360个纬度/经度点。纬度/经度是通过方位角（0到360度/点）和距离中心点的距离计算的。

function drawCircle(point, radius, dir) {
 
  var olat = point[0] * Math.PI / 180;
  var olon = point[1] * Math.PI / 180;
  var ERadius = 6371;  // Radius of the earth
  var points = 360;    // Calculate number of points
  
  var circle = new Array();
  
  if (dir == 1) {
    var start = 0;
    var end = points + 1;
  } else {
    var start = points + 1;
    var end = 0;
  }
  for (var i = start; (dir==1 ? i < end : i > end); i = i + dir) {

     var Bearing = i * Math.PI / 180;
     var cLat = Math.asin(Math.sin(olat)*Math.cos(radius/ERadius)+Math.cos(olat)*Math.sin(radius/ERadius)*Math.cos(Bearing)) * 180 / Math.PI;
     var cLon = (olon + Math.atan2(Math.sin(Bearing)*Math.sin(radius/ERadius)*Math.cos(olat), Math.cos(radius/ERadius)-Math.sin(olat)*Math.sin(Math.asin(Math.sin(olat)*Math.cos(radius/ERadius)+Math.cos(olat)*Math.sin(radius/ERadius)*Math.cos(Bearing))))) * 180 / Math.PI;
     circle.push(new google.maps.LatLng(cLat, cLon));
     bounds.extend(circle[circle.length-1]);  
  }
  return circle;
}

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

      var donut  = new google.maps.Polygon({ paths: [drawCircle([22.3089, 113.9150], 5000, 1), drawCircle([22.3089, 113.9150], 9000, -1)], strokeColor: "#AA0000",strokeWeight: 0,fillColor: "#AA0000",fillOpacity: 0.25 });
      donut.setMap(map);

上面的例子以香港为中心，内圆半径为5,000公里，外圆半径为9,000公里。这应该会产生一个甜甜圈形状，如下所示： enter image description here
0

如果您在尝试在Google My Maps上绘制甜甜圈时来到这里，以下是我的解决方法：

  1. 使用“添加线条或形状”工具绘制外部多边形

  2. 使用“添加线条或形状”工具绘制内部多边形（只需将其放在第一个多边形上方，暂时不用担心孔）

  3. 在图层上，单击三个点的菜单，然后选择“导出数据”>“CSV”。将文件保存到您的计算机上

  4. 打开刚刚导出的CSV文件，并使用文本编辑器进行编辑，使其具有以下格式：

    WKT，名称，描述 "POLYGON ((Outer_polygon_coordinates),(inner_polygon_coordinates))"，多边形名称，

  5. 以上述格式保存csv文件。

  6. 将csv文件重新导入Google My Maps。现在它具有正确的格式：）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接