我想画一个 20 公里厚的圆环，里面有 5 公里的空圆。我不知道怎么做。我相信这是可能的。
一种简单的解决方案是从 25 公里的圆中减去一个 5 公里的圆。是否可以？谢谢你的任何提示。
问问题
2882 次
3 回答
5
创建一个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);
请注意，内圈需要“绕”在外圈的对面。
代码片段：
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>于 2013-01-18T14:19:41.007 回答
1
这是使用几何库对 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">
更多信息请参考几何库的API页面。
于 2014-04-08T08:29:29.520 回答
0
好的，所以根据 geocodezip 的回答，我调整了函数以在谷歌地图上绘制一个甜甜圈，以适应地图的失真。该函数根据中心点和半径计算圆的 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 公里。这应该会产生一个像这样的甜甜圈：
于 2021-02-04T15:21:17.510 回答