时间戳

首页 > 解决方案 > 使用特征集合中的坐标来查找质心坐标

javascript - 使用特征集合中的坐标来查找质心坐标

问题描述

抱歉，我是 javascript 新手！

我的脚本中有 8 个要素集合，它们在我的 web 地图上创建了 8 个多边形图层，代表 8 种不同青蛙物种的物种分布。每个对应页面上的一个按钮（每只青蛙的一个img），onclick加载多边形，在中心触发一个弹窗，将setView改为中心。为此，我需要多边形质心。

8 个要素集合中的每一个都具有多边形角点的坐标。我想在草皮变换中使用这些坐标来找到每个多边形的质心（中心点）。我需要质心，这样我就可以设置地图的中心，这样当地图平移到多边形图层上时，它会以多边形中心为中心，并且会在该中心出现一个弹出标记。

我可以将每个图层的特征集合中的坐标手动输入到 turf.centroid(polygon) 特征中，但是每个多边形都有很多点并且有 8 个多边形。然后我还必须将操作结果复制到 L.LatLng 和 L.Marker 中。

我需要一种方法将角坐标从特征集合中获取到草皮操作中，然后将生成的质心坐标放入 L.LatLng 和 L.Marker 特征中。有任何想法吗？

这是一个名为 addFrog1Layer() 的函数的代码，我在其中添加了一个多边形层和一个弹出窗口到地图：

var polygon = turf.polygon([[[a, b], [c, d], [e, f], [g, h], [i, j], [k, l]]]);

var centroid = turf.centroid(polygon);

map.setView(new L.LatLng(x,y), 1);

Frog1Layer = L.geoJson(Frog1, { 
        style: {
            weight: 0.5,
            color: 'white',
            fillOpacity: 1,
            fillColor: 'red',
        }

}).addTo(map);


var frogIcon = L.icon({
iconUrl: 'frogIcon.png',

iconSize:     [30, 30],
iconAnchor:   [30, 30], 
popupAnchor:  [-3, -76]

L.marker([x,y], {icon: frogIcon}).bindPopup("I am a pop-up").addTo(map);

标签： javascriptcoordinatesgeojsonturfjs

解决方案

这是一个建议的代码，可能是您的解决方案。该代码演示了如何获取所需的坐标 x 和 y。

console.log("Hello World of Turf! ");

var polygon = turf.polygon([[[-5, 52], [-4, 56], [-2, 51], [-7, 54], [-5, 52]]], { name: 'poly1' });
var centroid = turf.centroid(polygon);

// get coordinates of the centroid
var centroid_xy = centroid.geometry.coordinates;

// get x and y
var x = centroid_xy[0];
var y = centroid_xy[1];
console.log("Centroid x: " + x);
console.log("Centroid y: " + y);
  
console.log("Goodbye Turf! ");
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>

推荐阅读