在 JavaScript 中查找多边形的中心点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16282330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find centerpoint of polygon in JavaScript
提问by Xotic750
I have a "place" object from Google Maps which has a set of coordinates that represent a bounding box for a given location, say London. Each set of coordinates has a latitude and longitude.
我有一个来自谷歌地图的“地点”对象，它有一组坐标，表示给定位置的边界框，比如伦敦。每组坐标都有一个纬度和经度。
I have written the below code to find the centerpoint, but I am not sure if it does actually produce the centerpoint. What if the polygon has 5 points instead of 4? Also, can this be done in a more efficient way, with less operations?
我已经编写了以下代码来查找中心点，但我不确定它是否确实产生了中心点。如果多边形有 5 个点而不是 4 个点怎么办？另外，这可以以更有效的方式完成，操作更少吗？
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)])
例子。
回答by Xotic750
This should get the centroidof the areaof any 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());
}());
On jsfiddle
回答by razz
This will get the centerpoint of any shape as an array [centerX, centerY]:
这将获得任何形状的中心点作为数组 [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];
}
Another way:
其他方式：
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);
Alternatively if your browser supports ECMAScript 6, then you can use Arrow functionsand Spread syntaxas follows:
或者，如果您的浏览器支持 ECMAScript 6，那么您可以使用Arrow 函数和Spread 语法，如下所示：
var center = function (arr)
{
var x = arr.map (xy => xy[0]);
var y = arr.map (xy => xy[1]);
var cx = (Math.min (...x) + Math.max (...x)) / 2;
var cy = (Math.min (...y) + Math.max (...y)) / 2;
return [cx, cy];
}
回答by geocodezip
To get the bounds of a Polygon (with your data) in the Google Maps API v3 (not tested):
要在 Google Maps API v3（未测试）中获取多边形的边界（使用您的数据）：
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();
回答by TacoEater
Here is my es6 solution to average an array of latitudes and longitudes. Average is not the exact center point but it gets the job done in my case.
这是我的 es6 解决方案，用于平均一系列纬度和经度。平均值不是确切的中心点，但在我的情况下它可以完成工作。
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};
}
回答by dgig
I realize this is not exactly what you are looking for, but in case no one else answers it may be of some help. This is a PHP function which I use to to find the center point of polygons for my map application. It should be fairly easily converted to javascript for your use.
我意识到这并不完全是您要找的东西，但如果没有其他人回答，它可能会有所帮助。这是一个 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);
}
Note that the polygon has to be closed, meaning the first point in the array and the last point in the array are the same.
请注意，多边形必须是闭合的，这意味着数组中的第一个点和数组中的最后一个点是相同的。
The function that converts the coordinate string to the necessary 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;
}
A sample of the raw coordinate 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
