在 JavaScript 中查找多边形的中心点

2023-03-15前端开发问题
4

本文介绍了在 JavaScript 中查找多边形的中心点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我有一个来自谷歌地图的地点"对象,它有一组坐标,代表给定位置的边界框,比如伦敦.每组坐标都有一个纬度和经度.

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.

我已经编写了以下代码来查找中心点,但我不确定它是否确实产生了中心点.如果多边形有 5 个点而不是 4 个呢?另外,这是否可以以更有效的方式完成,操作更少?

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?

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

示例.

推荐答案

这应该得到 centroid 任何 区域wiki/多边形" rel="noreferrer">多边形

This should get the centroid of the area of 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());
}());

关于 jsfiddle

这篇关于在 JavaScript 中查找多边形的中心点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

ajax请求获取json数据并处理的实例代码
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22 前端开发问题
215

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui laydate日期时间范围,时间默认设定为23:59:59
在Layui中,如果你想设置日期时间选择器(datetime)的默认结束时间为当天的23:59:59,你可以使用如下代码: laydate.render({ elem: '#test10' ,type: 'datetime' ,range: true ,max: '{:date("Y-m-d 23:59:59")}' ,ready: function(date){ $(".layui-laydat...
2024-10-24 前端开发问题
279

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui table数据表格reload where参数保留
1、创建表格对象 layui.use('table', function () { var table = layui.table; tableObj = table.render({ id: "tableId", url: 'url', //数据接口 elem: '#tableId', page: { limit: 15, limits: [15, 30, 50, 100] }, //开启分页 cols: [[ //表头 ... ]], w...
2024-07-18 前端开发问题
385