Google地图 - 根据4个坐标绘制椭圆 [英] Google maps - draw ellipse based off 4 coordinates
本文介绍了Google地图 - 根据4个坐标绘制椭圆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在谷歌地图上根据四个坐标绘制一个椭圆，比如通过API提供的当前矩形方法：
var rectangle = new google.maps.Rectangle（{
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃ FF0000'，
fillOpacity：0.35，
map：map，
界限：new google.maps.LatLngBounds（
google.maps.LatLng（33.671068，-116.25128），
new google.maps.LatLng（33.685282，-116.233942））
}）;
（使用参数paramater）。
如果失败了，是否有简单的方法将2个多边形之间的距离转换为度量单位？自己计算路径。这应该有所帮助：
http：// mathworld。 wolfram.com/Ellipse.html
编辑：这可能更有用：
< a href =http://www.geocodezip.com/v3_MW_example_eshapes.html =nofollow> http://www.geocodezip.com/v3_MW_example_eshapes.html
Mike Williams的v2 eshapes库的v3端口支持椭圆（但不是基于边界）。
代码段：
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（）），新增google.maps.LatLng（bounds。 getCenter（）。lat（），bounds.getNorthEast（）。lng（）））/ 2; // ===椭圆=== 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）;}）; //这个Javascript是基于//社区教会Javascript团队提供的代码// http://www.bisphamchurch.org.uk/ // http://econym.org .uk / gmap /// EShapes.js ////根据一个想法和一些代码行，通过thetoy////这个Javascript由Mike Williams提供//社区教会Javascript Team // http： //www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/////本作品根据知识共享许可协议授权// http://creativecommons.org/licenses/by /2.0/uk/////版本0.0 04 / Apr / 2008尚未完成//版本1.0 10 / Apr / 2008初始版本//版本3.0 12 / Oct / 2011移植到v3由Lawrence Rossgoogle.maps.Polygon .Ellipse =函数（point，r1，r2，rotation，strokeColour，strokeWeight，Strokepacity，fillColour，fillOpacity，opts）{rotation = rotation || 0;返回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 =翻牌？ 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％;宽度：100％; margin：0px; < script src =https：//
I would like to draw an ellipse on google maps based off four coordinates, like the current "rectangle" method available via the 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))
});
(using the bounds paramater).
If that fails, is there an easy way to convert the distance between 2 polygons to a unit of measurement?
解决方案
You have to calculate the path yourself. This should help:
http://mathworld.wolfram.com/Ellipse.html
Edit: This might be more useful:
http://www.geocodezip.com/v3_MW_example_eshapes.html
A v3 port of Mike Williams' v2 eshapes library, supports ellipse (but not based on the bounds).
Working example that sizes to the map bounds.
code snippet:
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>
这篇关于Google地图 - 根据4个坐标绘制椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
