2014-07-25 16 views
6

Chodzi o to, aby narysować łuk wyśrodkowany na określonym punkcie, używając kątów. Uwaga: Nie akord, ani sektor, ani obszar między akordem a łukiem.Rysuj łuk koła na mapach google

Memento: http://en.wikipedia.org/wiki/Arc_(geometry)

Pełne parametrów okręgu:

- center at coordinates LatC,LngC 
- radius of 1 609 meters 
- start angle of 0 degrees 
- end angle of 360 degrees 

przykład http://jsfiddle.net/GGvQH/3/

new google.maps.Circle({ 
    center: new google.maps.LatLng(18.4894, 73.910158), 
    radius: 1609, 
    ... 
}); 

Łuk 180 ° (PI/2 promieniowania) skierowanego na północ będzie jak:

- 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) 

Po pierwsze, nie chcę drukować polilinii dla każdego łuku, używając ton punktów, aby uzyskać gładki efekt: trzeba przeliczać dla każdej skali i może kosztować zasoby ... czy to jest?

Istnieje pomysł z wielokątami przecięcia Google Maps API v3 - circle sector ... Czy ktoś widział już działający jsfiddle? Uwaga: http://jsfiddle.net/Morlock0821/4dRB2/1/ jest bardzo blisko łuku, ale nie chcę zamkniętej powierzchni.

Kolejny pomysł z łożyskiem ... ale jestem niechętny, aby przedefiniować promień Ziemi, aby uzyskać mały łuk, który chcę. https://developers.google.com/maps/documentation/javascript/examples/geometry-headings (w tym przypadku chcę tylko fioletową linię, a nie czerwoną).

Każda pomoc zostanie bardzo doceniona.

+2

http://www.geocodezip.com/v3_polygon_example_arc.html – geocodezip

+0

Nicea sektor dysk, postaram się znaleźć źródło. Jeśli usunięcie obszaru i promieni jest możliwe (aby uzyskać tylko łuk), połączę go tutaj :) – nicolallias

+1

Wyświetl źródło w przeglądarce ... – geocodezip

Odpowiedz

8

Jest to kod używam w 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; 
} 

używany tak, gdzie startPoint to początek łuku, punkt końcowy jest koniec łuku i CenterPoint jest w centrum, ale można określić centrum, kąty i promień.

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

pomocnicze funkcje, może już nie być konieczne, jeśli obejmują 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; 
}; 
+0

Brzmi jak dobry punkt wyjścia, aby uzyskać łuk, dzięki! – nicolallias

Powiązane problemy