如何使用带有 Leaflet 的 for 循环制作圆圈？

Question

我不确定为什么我的用于将圆圈添加到传单层的 for 循环不起作用。

这是我的代码：

var linkDistance = $('#linkDistance').val();
var nodesCount = 8;
var bandwidth = "10 GB/s";
// gps coords for 505 Marquette
var rootLongitude = 35.088878;
var rootLatitude = -106.65262;


var mymap = L.map('mapid').setView([rootLongitude, rootLatitude], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);



function drawNext() {
  var coords = [];

  for (var i = 0; i <= nodesCount; i++) {
    var radius = linkDistance*1000;
    var angle = Math.PI*2*i/nodesCount;
    var dx = radius*Math.cos(angle);
    var dy = radius*Math.sin(angle);

    coords.push([(rootLatitude + (180/Math.PI)*(dy/EARTH_RADIUS)), (rootLongitude + (180/Math.PI)*(dx/EARTH_RADIUS)/Math.cos(rootLatitude*Math.PI/180))]);
  }

  for (var i = 0; i < coords.length; i++) {
    new L.Circle(coords[i], 200, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }).addTo(mymap);
      console.log("added circle to: " + coords[i]);
  }

}

drawNext()

;

地图加载但没有出现圆圈。我制作一个圆圈没有问题，但似乎 for 循环让它中断了。使用传单执行此操作的正确方法是什么？谢谢！

Answer 1

您有语法问题，尤其是在 L.Circle(coords[i], 500), {...
您忘记将您的圈子添加到地图中。
不是真正的技术问题，但请注意 Leaflet 中的第一个坐标称为 "latitude"，第二个坐标称为 "longitude"，而不是相反。纬度不能在[-90； 90] 定义范围。
根据您 linkDistance 的值，所选的初始缩放级别可能不会在视口中显示您的圆圈。

演示：https://jsfiddle.net/3v7hd2vx/59/

如何使用带有 Leaflet 的 for 循环制作圆圈？

How does one make circles using a for-loop with Leaflet?

javascript

gps

leaflet

mapbox