在Google地图上绘制圆的弧线 [英] Draw circle's arc on google maps
问题描述
这个想法是使用角度绘制一个以特定点为中心的弧。
注意：不是和弦，也不是扇形，也不是和弦与弧线之间的区域。
纪念品： http://en.wikipedia.org/wiki/Arc_（geometry）
全圆参数：
- 以坐标LatC，LngC
为中心 - 半径为1 609米
- 0度开始角度
- 360度结束角度
例如 http://jsfiddle.net/GGvQH/3/
new google.maps.Circle（{
center：new google.maps.LatLng（18.4894，73.910158），
radius：1609，
...
}）;
面向北方的180°（PI / 2辐射）弧线如下所示：
- 以坐标LatC，LngC
为中心 - 半径为1 609米
- 起始角度为270度（9点）
- 90度角（3点）的结束角度
第一总而言之，我不想为每条弧线绘制一条折线，使用大量的点来获得平滑的效果：需要重新计算每个比例，并且可能会花费资源......或者它是什么？
有多边形相交的想法
Google地图API v3 - 圈子部门
...有没有人见过一个可以工作的jsfiddle？
注意： http://jsfiddle.net/Morlock0821/4dRB2/1/非常接近弧线，但我不想要一个封闭的曲面。
另一个轴承的想法...但我不愿意重新定义地球的半径以获得我想要的小圆弧。
https://developers.google.com/maps/文档/ javascript / examples / geometry-headings
（在这种情况下，我只需要紫色线条，而不是红色线条）。
任何帮助将不胜感激。
这是我在这个例子：
函数drawArc（center，initialBearing，finalBearing，radius ）{
var d2r = Math.PI / 180; //度数为弧度
var r2d = 180 / Math.PI; //弧度到度
var points = 32;
//找到lat / lon中的raidus
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
extp.push（center.DestinationPoint（initialBearing + i * deltaBearing，radius））;
bounds.extend（extp [extp.length-1]）;
}
return extp;
$ b 像这样使用，其中startPoint指向圆弧的起点，endPoint是
var arcPts = drawArc（centerPoint）;圆弧的终点和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
}）;
如果您包含几何库 $ b
var EarthRadiusMeters = 6378137.0; //米
/ *根据纬度/经度球形大地测量公式和脚本
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; //地球的平均半径（以米为单位）
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（））;
}
// ===一个函数，返回两个LatLng之间的方位，弧度为===
// ===如果v1为null，则返回方位在第一个和最后一个顶点之间===
// ===如果v1存在但v2为null，则将方位从v1返回到下一个顶点===
// ===如果顶点超出范围，返回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（）; Math.cos（lat2），Math.cos（lat1）* Math.sin（lat2） - Math.sin（lat1）*数学公式（Math1） .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（））;
}
/ **
*扩展Number对象以将度数转换为弧度
*
* @return {Number}方位以弧度为单位
* @ignore
* /
Number.prototype.toRad = function（）{
return this * Math.PI / 180;
};
/ **
*扩展Number对象以将弧度转换为度数
*
* @return {Number}以度为单位
* @ignore
* /
Number.prototype.toDeg = function（）{
return this * 180 / Math.PI;
};
$ b $ **
*将标题以度数标准化为0到+360
*
* @return {数字}返回
* @ignore
* /
Number.prototype.toBrng = function（）{
return（this.toDeg（）+ 360）％360;
};
The idea is to draw an arc centered on a specific point, using angles.
Note: Not the chord, nor the sector, nor the area between the chord and the arc.
Memento: http://en.wikipedia.org/wiki/Arc_(geometry)
A full circle parameters:
- center at coordinates LatC,LngC
- radius of 1 609 meters
- start angle of 0 degrees
- end angle of 360 degrees
example http://jsfiddle.net/GGvQH/3/
new google.maps.Circle({
center: new google.maps.LatLng(18.4894, 73.910158),
radius: 1609,
...
});
An arc of 180° (PI/2 radiant) oriented to north would be like:
- 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)
First of all, I do not want to plot a polyline for each arc, using tons of points to get a smooth effect: need to recompute for each scale and may cost resources... or is it?
There is an idea with polygons intersection
Google Maps API v3 - circle sector
...do anyone have seen a working jsfiddle?
Note: http://jsfiddle.net/Morlock0821/4dRB2/1/ is very close to the arc, but I do not want a closed surface.
Another idea with bearing... but I am reluctant to redefine the earth's radius to get the tiny arc I want.
https://developers.google.com/maps/documentation/javascript/examples/geometry-headings
(in this case, I want only the purple line, not the red one).
Any help would be greatly appreciated.
解决方案 This is the code I use in 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;
}
Used like this, where startPoint it the start of the arc, endPoint is the end of the arc and centerPoint is the center, but you can specify center, angles and radius.
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
});
Ancillary functions, may no longer be necessary if you include the 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;
};
这篇关于在Google地图上绘制圆的弧线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
