Google maps - ellipse tirer sur la base de 4 coordonnées

Question

je voudrais dessiner une ellipse sur google maps à base de quatre coordonnées, comme la méthode « rectangle » courant disponible via l'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)) 
     }); 

(en utilisant les bornes paramater).

Si cela échoue, existe-t-il un moyen facile de convertir la distance entre 2 polygones en une unité de mesure?

Answer 1

Vous devez calculer le chemin vous-même. Cela devrait aider:

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

Edit: Cela pourrait être plus utile:

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

Un port v3 de Mike Williams' v2 eshapes library, prend en charge l'ellipse (mais pas basée sur les limites).

Working example qui correspond aux limites de la carte.

proof of concept fiddle

extrait de code:

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

Je ne sais pas si c'est ce que vous cherchez, mais here's a sample I made (cliquez sur deux points partout), il utilise function that takes two latLngs and returns a series of points that describe the ellipse, puis ajoute celles-ci à un polygone. Notez qu'il suppose que le cadre de délimitation est relativement petit (et loin des pôles) pour prendre les points comme coplanaires.