找到 Leaflet 多边形的中心? [英] Finding the center of Leaflet polygon?

问题描述

我创建的地图上有一堆传单多边形.每个多边形代表不同的东西.根据用户所在的页面，弹出窗口中会显示一组特定的信息.我需要找到一种方法来使弹出"气泡在它所代表的多边形的中心打开.

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

所以我需要找到一种方法让 .setLatLang 确定或获得多边形的中心.

So I need to find a way for .setLatLang to determin or be given the center of the polygon.

我想出了 3 个可行的解决方案，但不知道如何去做.

I came up with 3 solutions that may work, not sure how to go about it.

1. 找到一种方法来使用多边形的坐标来确定弹出窗口将打开的多边形的中心.

1. 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.

为每个多边形使用一个 id，因此每个弹出窗口都知道它可以打开的框区域(多边形).

Use an id for each polygon, so each popup knows the box area (polygon) it can be opened in.

有人可以帮帮我吗?

推荐答案

有几种方法可以逼近多边形的质心.

There are a few ways to approximate the centroid of a polygon.

最简单(但最不准确的方法)是获取包含多边形的边界框的中心，正如 yarl 建议的那样，使用 polygon.getBounds().getCenter();

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屋！