谷歌地图 - 画椭圆基于关闭4个坐标(Google maps - draw ellipse base

2019-08-02 04:22发布

我想提请对谷歌的椭圆形映射基于对开四个坐标,像目前的“矩形”可以通过API方法:

var rectangle = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          bounds: new google.maps.LatLngBounds(
            new google.maps.LatLng(33.671068, -116.25128),
            new google.maps.LatLng(33.685282, -116.233942))
        });

(使用bounds paramater)。

如果失败,有一种简单的方法来2个多边形之间的距离转换为计量单位?

Answer 1:

你必须自己计算路径。 这应该可以帮助:

http://mathworld.wolfram.com/Ellipse.html

编辑:这可能是更加有用:

http://www.geocodezip.com/v3_MW_example_eshapes.html

的V3端口麦克威廉姆斯V2 eshapes库 ,支持椭圆(但不是基于边界)。

工作示例是大小到地图的边界。

概念小提琴证明

代码片段:

 var map = null; var myOptions = { zoom: 8, center: new google.maps.LatLng(43, -79.5), mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map"), myOptions); google.maps.event.addListenerOnce(map, "bounds_changed", function() { var bounds = map.getBounds(); var major_axis = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng())) / 2; var minor_axis = google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng()), new google.maps.LatLng(bounds.getCenter().lat(), bounds.getNorthEast().lng())) / 2; // === Ellipse === var point = map.getCenter(); // new google.maps.LatLng(43,-78); var ellipse = google.maps.Polygon.Ellipse(point, major_axis, minor_axis, 0, "#000000", 2, 1, "#ffff00", 0.5); ellipse.setMap(map); }); // This Javascript is based on code provided by the // Community Church Javascript Team // http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/ // EShapes.js // // Based on an idea, and some lines of code, by "thetoy" // // This Javascript is provided by Mike Williams // Community Church Javascript Team // http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/ // // This work is licenced under a Creative Commons Licence // http://creativecommons.org/licenses/by/2.0/uk/ // // Version 0.0 04/Apr/2008 Not quite finished yet // Version 1.0 10/Apr/2008 Initial release // Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross google.maps.Polygon.Ellipse = function(point, r1, r2, rotation, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) { rotation = rotation || 0; return google.maps.Polygon.Shape(point, r1, r2, r1, r2, rotation, 100, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) } google.maps.Polygon.Shape = function(point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) { var rot = -rotation * Math.PI / 180; var points = []; var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10; var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10; var step = (360 / vertexCount) || 10; var flop = -1; if (tilt) { var I1 = 180 / vertexCount; } else { var I1 = 0; } for (var i = I1; i <= 360.001 + I1; i += step) { var r1a = flop ? r1 : r3; var r2a = flop ? r2 : r4; flop = -1 - flop; var y = r1a * Math.cos(i * Math.PI / 180); var x = r2a * Math.sin(i * Math.PI / 180); var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv; var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv; points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng)); } return (new google.maps.Polygon({ paths: points, strokeColor: strokeColour, strokeWeight: strokeWeight, strokeOpacity: Strokepacity, fillColor: fillColour, fillOpacity: fillOpacity })) } 
 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 
 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <div id="map"></div> 



Answer 2:

不知道这是你在寻找什么,但这里是我做了一个样本 (任意位置单击两个点),它采用了采用两个latLngs并返回一系列描述椭圆点的功能 ,然后把它们加到多边形。

需要注意的是它假定边框相对较小(从电线杆的距离)取分的共面。



文章来源: Google maps - draw ellipse based off 4 coordinates