Question

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

我的问题是给出的示例是两点，所以我尝试应用for-each循环迭代我的2D数组并绘制点。问题是您需要一个唯一的ID来添加图层。我正在关注此处的教程： https://www.mapbox.com/help/getting-started-directions-api/

这是我到目前为止的代码，非常感谢任何帮助！

<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>

注意我没有包含访问令牌

Answer 1

您可以添加一个包含所有点的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
        }
    }
});

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

1 个答案: