寻找Leaflet多边形的中心？ [英] Finding the center of Leaflet polygon?
问题描述
我在我创建的地图上有一堆小册子多边形。每个多边形代表不同的东西。取决于用户所在的页面，弹出窗口中会显示一组特定的信息。我需要找到一种方法让弹出气泡在它所代表的多边形的中心打开。
每个多边形都使用以下代码绘制：
var L20 = [
[74.0995，-99.92615]，
[74.14008，-99.4043]，
[74.07691，-99.33838]，
[74.03617，-99.86023]
] ;
var L19 = [
[74.02559，-99.84924]，
[74.06636，-99.32739]，
[74.0029， - 99.26147]，
[73.96197，-99.77783]
];
var L18 = [
[73.95142，-99.76684]，
[73.99235，-99.25048]，
[73.92889，-99.18456]，
[ 73.8878，-99.69543]
];
var set1 = L.polygon（[L20，L19，L18]，{
color：#fff，
weight：1，
stroke：true ，
opacity：0.05，
fillColor：＃346B1F，
}）。addTo（map）;
使用以下代码绘制弹出窗口：
var popup = L.popup（{}）
.setLatLng（[73.64017，-100.32715]）
.setContent（content）.openOn（map） ;
var popup = L.popup（）;
所以我需要为 .setLatLang 来确定或给出多边形的中心。
我想出了3个可行的解决方案，不知道该怎么去做。
-
找到一种方法来使用多边形的坐标来确定弹出窗口打开的多边形的中心。
-
调用多边形的一个点，然后偏移弹出的位置。
多边形，所以每个弹出窗口都知道可以打开的盒子区域（多边形）。
有人可以帮助我？
有几种方法可以近似多边形的质心。
最简单（但最不准确的方法）是使用 polygon.getBounds（）。getCenter（）; 获取包含多边形的边界框的中心。 c $ c>
我原本是回答questi的用公式找出点的质心，可以通过平均顶点的坐标来找到它。
var getCentroid = function（arr）{
return arr.reduce（function（x，y）{
return [x [0] + y [0] /arr.length，x [1] + y [1] /arr.length]
}，[0,0]）
}
centerL20 = getCentroid（L20）;
尽管点的质心近似逼近我，但一位评论者指出：不是多边形的质心 。
一个基于非重复图形质心的公式的实现，自相交闭合多边形给出了正确的结果：
var getCentroid2 = function（arr）{
var twoTimesSignedArea = 0;
var cxTimes6SignedArea = 0;
var cyTimes6SignedArea = 0;
var length = arr.length
var x = function（i）{return arr [i％length] [0]};
var y = function（i）{return arr [i％length] [1]}; （i = 0; i
。 *义）;
twoTimesSignedArea + = 2SA;
cxTimes6SignedArea + =（x（i）+ x（i + 1））* 2SA;
cyTimes6SignedArea + =（y（i）+ y（i + 1））* 2SA;
}
var sixSignedArea = 3 * twoTimesSignedArea;
return [cxTimes6SignedArea / sixSignedArea，cyTimes6SignedArea / sixSignedArea];
}
I have a bunch of leaflet polygons on a map I created. Each polygon represents something different. A specific set of information is displayed in a popup depending on the page the user is on. I need to find a way to make the "popup" bubble open in the center of the polygon it represents.
Each polygon is drawn using the following code:
var L20 = [
[74.0995, -99.92615],
[74.14008, -99.4043],
[74.07691, -99.33838],
[74.03617, -99.86023]
];
var L19 = [
[74.02559, -99.84924],
[74.06636, -99.32739],
[74.0029, -99.26147],
[73.96197, -99.77783]
];
var L18 = [
[73.95142, -99.76684],
[73.99235, -99.25048],
[73.92889, -99.18456],
[73.8878, -99.69543]
];
var set1 = L.polygon([L20, L19, L18], {
color: "#fff",
weight: 1,
stroke: true,
opacity: 0.05,
fillColor: "#346B1F",
}).addTo(map);
The popup is drawn using the following code:
var popup = L.popup({})
.setLatLng([73.64017, -100.32715])
.setContent(content).openOn(map);
var popup = L.popup();
So I need to find a way for .setLatLang to determin or be given the center of the polygon.
I came up with 3 solutions that may work, not sure how to go about it.
find a way to use the coordinates of a polygon to determine the center of the polygon where the popup will open.
call one point of the polygon, then offset the position of the popup.
Use an id for each polygon, so each popup knows the box area (polygon) it can be opened in.
Can someone help me please?
There are a few ways to approximate the centroid of a polygon.
The easiest (but least accurate method) is to get the center of the bounding box that contains the polygon, as yarl suggested, using polygon.getBounds().getCenter();
I originally answered the question with the formula for finding the centroid of the points, which can be found by averaging the coordinates of its vertices.
var getCentroid = function (arr) {
return arr.reduce(function (x,y) {
return [x[0] + y[0]/arr.length, x[1] + y[1]/arr.length]
}, [0,0])
}
centerL20 = getCentroid(L20);
While the centroid of the points is a close enough approximation to trick me, a commenter pointed out that it is not the centroid of the polygon.
An implementation based on the formula for a centroid of a non-self-intersecting closed polygon gives the correct result:
var getCentroid2 = function (arr) {
var twoTimesSignedArea = 0;
var cxTimes6SignedArea = 0;
var cyTimes6SignedArea = 0;
var length = arr.length
var x = function (i) { return arr[i % length][0] };
var y = function (i) { return arr[i % length][1] };
for ( var i = 0; i < arr.length; i++) {
var twoSA = x(i)*y(i+1) - x(i+1)*y(i);
twoTimesSignedArea += twoSA;
cxTimes6SignedArea += (x(i) + x(i+1)) * twoSA;
cyTimes6SignedArea += (y(i) + y(i+1)) * twoSA;
}
var sixSignedArea = 3 * twoTimesSignedArea;
return [ cxTimes6SignedArea / sixSignedArea, cyTimes6SignedArea / sixSignedArea];
}
这篇关于寻找Leaflet多边形的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
