如何使用带有Leaflet的for循环制作圆圈? [英] How does one make circles using a for-loop with Leaflet?
本文介绍了如何使用带有Leaflet的for循环制作圆圈?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不确定为什么将循环添加到传单层的for循环不起作用.
I'm not sure why my for-loop for adding circles to a leaflet layer isn't working.
这是我的代码:
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 © <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循环会使它折断.使用传单执行此操作的正确方法是什么?谢谢!
The map loads but no circles are appearing. I have no trouble making a single circle, but it seems like the for loop makes it break. What's the proper way to do this using leaflet? Thanks!
推荐答案
- 您遇到语法问题,尤其是在
L.Circle(coords[i], 500), {...
- 您忘了将圈子添加到地图上.
- 这并不是真正的技术问题,但是请注意,Leaflet中的第一个坐标称为纬度",第二个坐标称为经度",而不是相反的.纬度不能在[-90; 90]范围.
- 取决于您的
linkDistance
的值,所选的初始缩放级别可能不会在视口中显示您的圆圈.
- You have syntax issues, in particular at
L.Circle(coords[i], 500), {...
- You forgot to add your circles to the map.
- Not really a technical problem, but note that the first coordinate in Leaflet is called "latitude" and the second "longitude", not the reverse. Latitude cannot be outside [-90; 90] range by definition.
- Depending on the value of your
linkDistance
, the chosen initial zoom level may not display your circles in the view port.
演示: https://jsfiddle.net/3v7hd2vx/59/
这篇关于如何使用带有Leaflet的for循环制作圆圈?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文