Finden Sie die Koordinaten des Mittelpunktes des Polygons im JavaScript

Habe ich einen "Ort" Objekt von Google Maps, die einen Satz von Koordinaten, die eine bounding box für einen bestimmten Ort, sagen wir London. Jeder Satz von Koordinaten hat einen Breitengrad und einen Längengrad.

Habe ich geschrieben, die folgenden code zu finden, der Mittelpunkt, aber ich bin nicht sicher, ob es tatsächlich produzieren den Mittelpunkt. Was ist, wenn das polygon hat 5 Punkte statt 4? Auch, kann dies in effizienter Weise, mit weniger Operationen?

function average(array) {
  //Add together and then divide by the length
  return _.reduce(array, function (sum, num) {
    return sum + num;
  }, 0) / array.length;
}

//I have a two-dimensional array that I want to get the average of

var coords = [
  [ -1.2, 5.1 ],
  [ -1.3, 5.2 ],
  [ -1.8, 5.9 ],
  [ -1.9, 5.8 ]
]

//So I get the first column

var lats = coords.map(function (coord) {
  return coord[0];
})

//Then the second

var longs = coords.map(function (coord) {
  return coord[1];
})

//And average each column out

console.log([average(lats), average(longs)])

Beispiel.

Verwenden Sie die Google Maps Javascript API v3?
Ja, @geocodezip.
Ich würde vorschlagen, immer die Grenzen des Polygons, dann mit der Mitte der Grenzen.
Das ist, was ich habe, glaube ich? Die "bounding box".

InformationsquelleAutor | 2013-04-29

Sollten sich die Schwerpunkt der Bereich jeder polygon

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global console */

(function () {
    "use strict";

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    function Region(points) {
        this.points = points || [];
        this.length = points.length;
    }

    Region.prototype.area = function () {
        var area = 0,
            i,
            j,
            point1,
            point2;

        for (i = 0, j = this.length - 1; i < this.length; j=i,i++) {
            point1 = this.points[i];
            point2 = this.points[j];
            area += point1.x * point2.y;
            area -= point1.y * point2.x;
        }
        area /= 2;

        return area;
    };

    Region.prototype.centroid = function () {
        var x = 0,
            y = 0,
            i,
            j,
            f,
            point1,
            point2;

        for (i = 0, j = this.length - 1; i < this.length; j=i,i++) {
            point1 = this.points[i];
            point2 = this.points[j];
            f = point1.x * point2.y - point2.x * point1.y;
            x += (point1.x + point2.x) * f;
            y += (point1.y + point2.y) * f;
        }

        f = this.area() * 6;

        return new Point(x / f, y / f);
    };

    var polygon = [
            {"x": -1.2, "y": 5.1},
            {"x": -1.3, "y": 5.2},
            {"x": -1.8, "y": 5.9},
            {"x": -1.9, "y": 5.8}
        ],
        region = new Region(polygon);

    console.log(region.centroid());
}());

Auf jsfiddle

Ich bin der Annahme, dass diese Antwort, denn es beantwortet meine Frage explizit, obwohl ich mit der Google Maps API Antwort von @razzak in meiner app.
Es sei denn, Sie finden einige Informationen, die sagt, es geht nicht.

InformationsquelleAutor Xotic750

Dadurch wird der Mittelpunkt in jeder Form als array [centerX, centerY]:

var center = function (arr)
{
    var minX, maxX, minY, maxY;
    for (var i = 0; i < arr.length; i++)
    {
        minX = (arr[i][0] < minX || minX == null) ? arr[i][0] : minX;
        maxX = (arr[i][0] > maxX || maxX == null) ? arr[i][0] : maxX;
        minY = (arr[i][1] < minY || minY == null) ? arr[i][1] : minY;
        maxY = (arr[i][1] > maxY || maxY == null) ? arr[i][1] : maxY;
    }
    return [(minX + maxX) / 2, (minY + maxY) / 2];
}

Einen anderen Weg:

var center = function (arr)
{
    var x = arr.map (function (a){ return a[0] });
    var y = arr.map (function (a){ return a[1] });
    var minX = Math.min.apply (null, x);
    var maxX = Math.max.apply (null, x);
    var minY = Math.min.apply (null, y);
    var maxY = Math.max.apply (null, y);
    return [(minX + maxX) / 2, (minY + maxY) / 2];
}
getCenter (coords);

Alternativ, wenn Ihr browser unterstützt ECMAScript 6 ist, dann können Sie Pfeil-Funktionen und Verbreiten syntax wie folgt:

var center = function (arr)
{
    var x = arr.map (x => x[0]);
    var y = arr.map (x => x[1]);
    var cx = (Math.min (...x) + Math.max (...x)) / 2;
    var cy = (Math.min (...y) + Math.max (...y)) / 2;
    return [cx, cy];
}

jsfiddle

InformationsquelleAutor razzak

3

Um die Grenzen eines Polygons (mit Ihren Daten) in der Google Maps API v3 (nicht getestet):
```
var coords = [
  [ -1.2, 5.1 ],
  [ -1.3, 5.2 ],
  [ -1.8, 5.9 ],
  [ -1.9, 5.8 ]
];

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i<coords.length; i++) {
   bounds.extend(new google.maps.LatLng(coords[i][0], coords[i][1]));
}
var center = bounds.getCenter();
```
- Was hat Grenzen.getCenter produzieren? Ich bin immer Werte jb und kb. Ich brauche nur einen lat/long.
- Never mind, jb ein kb ist lat/lng!
- Das sind die internen minimiert Namen verwenden-center.lat (), um die Breite, center.lng() der Längen-Mitte.toUrlValue (), um eine durch Komma getrennte Zeichenfolge mit den beiden Koordinaten.
InformationsquelleAutor geocodezip

Ich weiß, das ist nicht genau das, was du suchst, aber falls sonst niemand Antworten kann es eine Hilfe sein. Dies ist eine PHP-Funktion, die ich verwenden, um zu finden, die den Mittelpunkt der Polygone für meine map-Anwendung. Es sollte Recht einfach in javascript für Ihren Einsatz.

function getCenter($coord_array){
    $i = 0;
    $center = $coord_array[0];
    unset($coord_array[0]);
    foreach($coord_array as $key => $coord){    
        $plat = $coord[0];
        $plng = $coord[1];
        $clat = $center[0];
        $clng = $center[1];
        $mlat = ($plat + ($clat * $i)) / ($i + 1);
        $mlng = ($plng + ($clng * $i)) / ($i + 1);
        $center = array($mlat, $mlng);
        $i++;
    }
    return array($mlat, $mlng);
}

Beachten Sie, dass das polygon muss geschlossen sein, d.h. die erste Stelle im array und der Letzte Punkt in dem array sind die gleichen.

Die Funktion konvertiert die Koordinaten-string auf das notwendige array:

function coordStringToArray($coord_string)
{
    $coord_array = explode("\n",$coord_string);
    foreach($coord_array as $key => $coord){
        $coord_array[$key] = explode(', ',$coord);
    }
    return $coord_array;
}

Einer Probe des rohen koordinieren string:

42.390576, -71.074258
42.385822, -71.077091
42.382461, -71.079408
42.382018, -71.081468
42.380496, -71.080953
42.380433, -71.076576
42.373902, -71.073915
42.373078, -71.069967
42.369273, -71.064216
42.368892, -71.062328
42.369527, -71.056491
42.370288, -71.050741
42.371619, -71.047908
42.376185, -71.046278
42.383476, -71.045763
42.386139, -71.050483
42.386202, -71.057693
42.387597, -71.066534
42.390259, -71.072284
42.391210, -71.073658

InformationsquelleAutor dgig

Hier ist mein es6-Lösung durchschnittlich ein array von breiten-und Längengrade.
Durchschnitt ist nicht der genaue Mittelpunkt, aber es bekommt den job zu erledigen in meinem Fall.

getLatLonCenterFromGeom = (coords) => {
    const arrAvg = arr => arr.reduce((a,b) => a + b, 0) / arr.length;

    const centerLat = arrAvg(coords.map(c=>c.latitude));
    const centerLon = arrAvg(coords.map(c=>c.longitude));

    if (isNaN(centerLat)|| isNaN(centerLon))
        return null;
    else return {latitude: centerLat, longitude:centerLon};
}

InformationsquelleAutor TacoEater

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.