我正在绘制圆形在我的不整形多边形地图的中心.圆圈被放置在大部分国家的中心.但是对于“挪威”的多边形,返回中心点是错误的.缩放/缩放页面后,您可以清楚地看到差异.

我使用这个stackoverflow解决方案: link

我的代码在这里.
SVG:

<svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; z-index: 0; float: left; background: transparent; height: 500px; width: 500px; margin-top: 0px; margin-left: 0px;">
 <path class="mapShape" stroke="#FFFFFF" stroke-width="0.25" fill="#ffff00" d="M289.61881571694846,107.44341140465033,293.96308112495205,110.5369251340838,292.1742152937817,111.64028258514635,293.69594267913214,114.17588213225122,291.33275072129567,115.75640079550517,290.21101327644885,116.115304587361,290.79940687634996,113.34302402649551,289.01707237203874,111.73064813415773,286.86058614336986,113.10652807111005,286.17946205663384,116.00897875925767,284.8551099335093,117.71420145300249,283.3639577705983,116.78716653168755,281.5503303156214,116.97787478097227,280.0068557650149,114.91879878457861,279.17443456817995,115.95395481299134,278.3128736053582,116.11389849530838,278.1091105619184,118.63382135713674,275.4914839478672,118.02707970555407,275.1238635503685,120.11785014900434,273.7901091874799,120.10529402219055,272.87321137841224,122.7050543288587,271.48390485080984,126.60600357598904,269.3273468493182,131.3173178164711,269.8332017031975,132.42411528484843,269.3498835156233,133.6909765856373,267.9721324124638,133.63667113556374,267.07023512332535,136.56637255563933,267.1556447822521,140.55669253761528,268.04325927968785,142.03410132622142,267.5838414420485,145.3716436133896,266.42815545209885,147.26315676671453,265.8157897294402,148.82368555076928,264.88410671891126,147.16092140518467,262.1416671663106,150.27022727262624,260.28992834251846,150.88797751378152,258.3692158361812,149.54060413568916,257.8725479035983,146.63056295282385,257.4334417747625,140.05376745248705,258.71236170116373,138.13152704055724,262.3797376189663,135.55992732652805,265.12181830745385,132.29324106111955,267.6643705490366,127.68026976914571,271.0015914827522,120.85619046583638,273.32767689129025,118.04298816880565,277.1444838258035,113.13815447740048,280.19224496586196,111.35745222872376,282.47741986550216,111.5754647031133,284.5924214026924,108.10819671605745,287.12506899475255,108.29698566394183ZM284.83905555555555,72.19815552139636,281.7365555555555,74.85366572152822,279.28612499999997,73.35699077101634,280.24459722222224,71.66044868206447,279.40541666666667,69.508641420061,282.28369444444445,68.1303212868272,282.8351944444444,70.69457195193213ZM275.84976388888896,58.9806663889022,280.42198611111115,64.57567572395904,276.92690277777774,67.37974197318883,276.1551666666667,72.37724133868834,274.9366805555556,73.61091608778322,274.2752777777778,78.81637965917018,272.6015972222222,79.05316716888755,269.61470833333334,75.26524507138704,270.87438888888886,72.97467771855085,268.79249999999996,71.06094914643477,266.0865416666667,65.20265086315597,265.0062916666667,59.363240232610856,268.7927361111111,56.545993503156645,269.5535,59.301357483657114,271.5316944444445,59.193568518861454,272.0590972222222,56.500983977896404,274.0984027777777,56.221878380253195ZM285.84392411084985,53.30414066139549,288.5659801818243,56.17728511117262,286.50645903652526,60.397046089088526,282.4784246850189,61.291565425339506,278.3822061520165,60.0221846103223,278.1350923237096,57.880800099653854,276.14203281216373,57.74271786397911,274.62224329302427,54.037937230381914,278.9111000819593,51.69790103414376,280.92770107932694,53.71698527072119,282.3322952181492,51.194805998985345Z" stroke-linejoin="round" stroke-linecap="square" nodeValue="#E0E0E0"></path>
<circle fill="#FE0000" cx="271.7692623673869" cy="128.99711033923683" fill-opacity="1" r="1"></circle>
</svg>

JavaScript的:

var path = "289.61881571694846,291.33275072129566,286.86058614336985,286.17946205663383,116.78716653168754,279.17443456817994,116.11389849530837,272.87321137841223,271.48390485080983,126.60600357598903,267.07023512332534,268.04325927968784,264.88410671891125,132.29324106111954,113.13815447740047,282.47741986550215,108.29698566394182"
        var stringData = path.split(",");
        var length = stringData.length;
        var data = [],obj;

        for (var i = 0; i < length; i = i + 2) {
            obj = { x: parseFloat(stringData[i]),y: parseFloat(stringData[i + 1]) };
            data.push(obj);
        }

        var centerPoint = _findMidPointofPoylgon(data);
        alert("cx: " + centerPoint.x + "cy: " + centerPoint.y);

   //Return the centerX and centerY of the unshape polygon
        function _findMidPointofPoylgon (points) {
            var x = 0,y = 0,i,min = 0,j,f,point1,point2;
            var max = points.length;
            var area = function () {
                var area = 0,point2;

                for (i = 0,j = max - 1; i < max; j = i,i++) {
                    point1 = points[i];
                    point2 = points[j];
                    area += point1.x * point2.y;
                    area -= point1.y * point2.x;
                }
                area /= 2;

                return area;
            };
            for (i = 0,i++) {
                point1 = points[i];
                point2 = points[j];
                f = point1.x * point2.y - point2.x * point1.y;
                x += (point1.x + point2.x) * f;
                y += (point1.y + point2.y) * f;
            }

            f = area() * 6;
            var xSum = x / f,ySum = y / f;

            return { x: xSum,y: ySum };             
        }

我已经将方向路径数据存储在数组集合中,用于计算中心点.

Fiddle link

你能告诉我我的代码有什么问题吗?

解决方法

您可以实现 Polylabel.它是由MapBox设计的在多边形的中心显示标签的算法,不管其形状如何

javascript – 查找不定形多边形的中心点,用于地图的更多相关文章

  1. Swift中的集合类数据结构

    在那种情况下,你将会需要一种基本的集合类数据结构。继续学习,你将会比较成熟的Cocoa数据结构与对应的纯Swift结构的性能。常见iOS数据结构iOS中三种最常用的数据结构是arrays,dictionaries和sets。除了在Swift和Objective-C中旧的Foundation框架中的数据结构,现在又有了新的仅支持Swift版本的数据结构与语言紧密结合在一起。Swift数组是同质的,意味着每一个Swift数组都只包含一种类型的对象。

  2. 是Swift词典的索引性能?即使是异国风情(UUID)?

    我想构建一些将保留以便快速搜索的数组.如果我使用这样的东西:请问查询:在对数时间内执行?如果是,对其他类型是否相同:Float,Double,String.最后,我需要它使用UUID类型,它会工作吗?

  3. PHP实现二维数组中的查找算法小结

    这篇文章主要介绍了PHP实现二维数组中的查找算法,涉及PHP数组遍历、判断、计算等相关操作技巧,需要的朋友可以参考下

  4. 详解Python查找算法的实现(线性,二分,分块,插值)

    这篇文章主要为大家介绍了Python中常见的四种查找算法的实现:线性、二分、分块和插值,文中通过图片详细讲解了它们实现的原理与代码,需要的可以参考一下

  5. 如何利用JavaScript实现二叉搜索树

    这篇文章主要给大家介绍了关于如何利用JavaScript实现二叉搜索树的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. PHP / MySQL – 查找具有相似或匹配属性的项目

    现在问题由于哈希冲突而缩小为唯一性问题,但我们可以非常确定不匹配的属性.此外,通过使用乘数的大小从生成的数字中提取散列值,这将具有相对容易检查属性是否以不同顺序出现在另一个项目中的优点.HTH.编辑:检查匹配的示例给定项目1和项目2.计算的项目哈希值相等.这是最好的情况.无需进一步计算.给定项目1和项目2.项目的计算哈希值不相等.继续打破财产哈希……

  7. 正则表达式太慢?这里有一个提速100倍的方案附代码

    “当遇到一个文本处理问题时,如果你在第一时间想到了正则表达式,那么恭喜你,你的问题从一个变成了俩!“如果你曾参与过文本数据分析,正则表达式(Regex)对你来说一定不陌生。词库索引、关键词替换……正则表达式的强大功能使其成为了文本处理的必备工具。然而,在处理大文本的情境下,正则表达式的低效率却常常让人抓耳挠腮。今天,文摘菌将为你介绍一款比正则表达式快数百倍的Python库——FlashText。让

  8. php array_intersect()效率

    考虑下面的脚本.只有三个值的两个数组.当我使用array_intersect()比较这两个数组时.结果很快.我的问题是array_intersect()的效率是多少.是否我们比较两个都有1000个值的数组.会产生更好的结果…..我们需要使用一些哈希函数来处理快速找到常用值这将是有效的???..我需要你的建议…

  9. sku组合查询算法探索

    什么是SKU问题来自垂直导购线周会的一次讨论,sku组合查询,这个题目比较俗,是我自己取得。当sku属性只是2×2的时候,还是很容易计算的。演示框最下面是可用的sku组合。如果sku属性组合元素的总和数用m表示,结果数据长度为n,那么每次选择后,需要的算法大致步骤是m*n。正则表达式很不稳定,万一sku组合中有一些特殊字符,就可能导致一个正则匹配没能匹配到我们想要的表达式。

  10. 正则表达式,来自百度百科

    正则表达式编辑正则表达式,又称规则表达式。正则表达式被作为用来描述其称之为“正则集的代数”的一种表达式,因而采用了“正则表达式”这个术语。传统的NFA引擎运行所谓的“贪婪的”匹配回溯算法,以指定顺序测试正则表达式的所有可能的扩展并接受第一个匹配项。因为传统的NFA构造正则表达式的特定扩展以获得成功的匹配,所以它可以捕获子表达式匹配和匹配的反向引用。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部