Javascript 如何使用for each语句在mapbox上绘制多个点？_Javascript_Arrays_Mapbox

Javascript 如何使用for each语句在mapbox上绘制多个点？

javascript arrays mapbox

Javascript 如何使用for each语句在mapbox上绘制多个点？,javascript,arrays,mapbox,Javascript,Arrays,Mapbox,我有一个经度和纬度的2D数组，我希望能够在MapBox上映射这些点我的问题是给出的示例是针对两个点的，所以我尝试应用for-each循环来迭代我的2D数组并绘制点。问题是您需要一个唯一的ID来添加层。我一直在关注本教程，该教程位于此处：这是我迄今为止的代码，任何帮助都将不胜感激 <body> //create the map <div id='map'></div> <div id='instructions'></div> &

我有一个经度和纬度的2D数组，我希望能够在MapBox上映射这些点

我的问题是给出的示例是针对两个点的，所以我尝试应用for-each循环来迭代我的2D数组并绘制点。问题是您需要一个唯一的ID来添加层。我一直在关注本教程，该教程位于此处：

这是我迄今为止的代码，任何帮助都将不胜感激

<body>
//create the map
<div id='map'></div>
<div id='instructions'></div>
<script>
mapboxgl.accessToken = 'ACCESS TOKEN KEY';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
  center: [-6.266155,53.350140], // starting position
  zoom: 12 // starting zoom
});


//load the route function
map.on('load', function(){
  getRoute();
});

//get route takes start and end (lat,long)
function getRoute() {
  //create an array
  var arr = [
    [-6.3053, 53.3562],
    [-6.802586, 53.176861],
    [-6.5991, 53.0918],
    [-6.3053, 53.3562]];

  arr.forEach(function(el, index)
  {


    var nodeOnes = [];
    nodeOnes = arr[0];


    console.log("here" + n);
      map.addLayer({
      id: nodeOnes,
      type: 'circle',
      source: {
        type: 'geojson',
        data: { 
          type: 'Feature', 
          geometry: {
            type: 'Point',
            coordinates: nodeOnes
          }
        }
      }
    });
});
}
</script>


//创建地图
mapboxgl.accessToken='访问令牌密钥'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v9“，//样式表位置
中心：[-6.266155,53.350140]，//起始位置
缩放：12//开始缩放
});
//加载路由函数
map.on（'load'，function（））{
getRoute（）；
});
//获取路线的起点和终点（横向、纵向）
函数getRoute（）{
//创建一个数组
var arr=[
[-6.3053, 53.3562],
[-6.802586, 53.176861],
[-6.5991, 53.0918],
[-6.3053, 53.3562]];
arr.forEach（函数（el，索引）
{
var nodeOnes=[]；
nodeOnes=arr[0]；
console.log（“此处”+n）；
map.addLayer({
id:Nodeons，
键入：“圆”，
资料来源：{
键入：“geojson”，
数据：{
键入：“功能”，
几何图形：{
键入：“点”，
坐标：nodeOnes
}
}
}
});
});
}

注意：我不包括我的访问令牌

而不是添加具有自己图层的独立点，您可以添加包含所有点的FeatureCollection：

const allPoints = arr.map(point => ({
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: point
    }
}));

map.addLayer({
    id: 'path',
    type: 'circle',
    source: {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: allPoints
        }
    }
});

可能是重复的嗨，你的代码工作得很好，但是你怎么能一个接一个地路由这些坐标？@GrandeurH你说的“路由”是什么意思？你在说方向api吗？