javascript - 在谷歌地图上绘制圆弧

标签 javascript google-maps google-maps-api-3 geometry

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

纪念品: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/非常接近圆弧，但我不想要一个封闭的曲面。

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

如有任何帮助，我们将不胜感激。

最佳答案

这是我在 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 是圆心，但您可以指定圆心、 Angular 和半径。

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;
};

screenshot of resulting map

代码片段(使用几何库):

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());
}

/**
 * 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;
};

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  bounds.extend(latlng);
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}

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;
}

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

  var points = 32;

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


  var extp = new Array();
  for (var i = 0; i < points + 1; i++) // one extra here makes sure we connect the 
  {
    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();

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  var startPoint = new google.maps.LatLng(48.610335003092956, -1.6123447775299600);
  var endPoint = new google.maps.LatLng(48.596190206866830, -1.5551704322317228);
  var centerPoint = new google.maps.LatLng(48.565630000000006, -1.6050300000000002);
  createMarker(startPoint, "start: " + startPoint.toUrlValue(6) + "<br>distance to center: " + (google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint) / 1000).toFixed(3) + " km<br>Bearing: " + google.maps.geometry.spherical.computeHeading(centerPoint, startPoint) + "<br><a href='javascript:map.setCenter(new google.maps.LatLng(" + startPoint.toUrlValue(6) + "));map.setZoom(20);'>zoom in</a> - <a href='javascript:map.fitBounds(bounds);'>zoom out</a>");
  createMarker(endPoint, "end: " + endPoint.toUrlValue(6) + "<br>distance to center: " + (google.maps.geometry.spherical.computeDistanceBetween(centerPoint, endPoint) / 1000).toFixed(3) + " km<br>Bearing: " + google.maps.geometry.spherical.computeHeading(centerPoint, endPoint) + "<br><a href='javascript:map.setCenter(new google.maps.LatLng(" + endPoint.toUrlValue(6) + "));map.setZoom(20);'>zoom in</a> - <a href='javascript:map.fitBounds(bounds);'>zoom out</a>");
  createMarker(centerPoint, "center: " + centerPoint.toUrlValue(6));

  var arcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint));
  // add the start and end lines
  arcPts.push(centerPoint);
  bounds.extend(centerPoint);
  arcPts.push(startPoint);

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

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<div id="map_canvas"></div>

关于javascript - 在谷歌地图上绘制圆弧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24956616/

上一篇：javascript - 使用 arguments 伪参数作为可写的东西

下一篇：javascript - 如何从 JavaScript 对象生成校验和？

相关文章：

google-maps - 谷歌地理编码服务返回虚假地址响应

javascript - 组件属性可用于所有 View Ember？

javascript - d3.select 不更新网页中的图表

javascript - 试图制作可重用的 javascript 函数，但数据没有返回

javascript - 如何在包含 iframe、frame、frameset 的页面中通过 id 获取元素？

javascript - 触发谷歌地图自动完成焦点

javascript - 使用 JavaScript 更改 HTML iframe 的本地 src

google-maps - 我如何从头到尾获取谷歌地图v3方向坐标

google-maps-api-3 - 如何在 Google map 中查找当前的缩放级别？

javascript - Google map v3 - 限制功能可以工作的区域

©2024 IT工具网  联系我们