JavaScriptでポリゴンの中心点を見つける

Question

私は、Google Mapsから "place"オブジェクトを持っています。これは、指定された場所、例えばロンドンのバウンディングボックスを表す座標を持っています。座標の各セットには緯度と経度があります。

私は中心点を見つけるために以下のコードを書いていますが、実際に中心点を生成するかどうかはわかりません。ポリゴンに4点でなく5点がある場合はどうなりますか？また、より少ない操作でより効率的な方法でこれを行うことができますか？

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

Example。

Answer 1

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

オンjsfiddle

Answer 2

私はこれがあなたが探しているものではないことを認識していますが、それ以外の人が答えなければ何らかの助けになるかもしれません。これは、マップアプリケーションのポリゴンの中心点を見つけるために使用するPHP関数です。それはあなたの使用のためにかなり簡単にjavascriptに変換する必要があります。

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

ポリゴンは閉じている必要があります。つまり、配列の最初の点と配列の最後の点が同じであることに注意してください。

必要配列に座標列を変換する関数：

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

座標生の文字列のサンプル：

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 

Answer 3

これは、任意の形状の中心点として、アレイを取得します[ centerX、centerY]：

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

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]; 
} 
var c = center(coords); 
console.log(c); 

このようにすることもできます：

var getCenter = 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); 

jsfiddle

Answer 4

GoogleマップAPI v3の（テストしていません）に（自分のデータとの）ポリゴンの境界を取得するには：これはareaのcentroidを取得する必要があります

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