Using an array of longitudes and latitudes to plot on mapbox

问题

i am trying to implement Mapbox api into my web application however i have reached a snag. My objective is to grab the longitudes and latitudes from my array and insert them into the coordinates. I have tried using a loop that loops through but it does not seem to work. If anyone has any solution it be greatly appreciated! note i took out my access token

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Draw GeoJSON points</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>

var longLat = [
 [53.515333, -6.190796],
 [53.342686, -6.403656],
 [51.678091, -9.624023],
 [52.768293, -1.560059]
 ];

mapboxgl.accessToken = 'undefined';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-96, 37.8],
    zoom: 3
});

map.on('load', function () {

    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.03238901390978, 38.913188059745586]
                    },
                    "properties": {
                        "title": "Mapbox DC",
                        "icon": "monument"
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-122.414, 37.776]
                    },
                    "properties": {
                        "title": "Mapbox SF",
                        "icon": "harbor"
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "{icon}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});
</script>

</body>
</html>

回答1:

I've got no mapbox experience, but basing on this documentation page, i came up with following;

You need to create your features collection (array) within for loop, like that:

var featureCollection = []; // Initialize empty collection

// Your longLat collection
var longLat = [
  [53.515333, -6.190796],
  [53.342686, -6.403656],
  [51.678091, -9.624023],
  [52.768293, -1.560059]
];

// for every item object within longLat
for(var itemIndex in longLat) {
  // push new feature to the collection
  featureCollection.push({
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": longLat[itemIndex]
    },
    "properties": {
      "title": "Mapbox DC",
      "icon": "monument"
    }
  });
}

Try if you can skip the properties (icon and title). For now they are hardcoded.

Then, you pass them to the map itself this way:

map.on('load', function () {
  map.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
    "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": featureCollection 
      }
    },
    "layout": {
      "icon-image": "{icon}-15",
      "text-field": "{title}",
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
      "text-offset": [0, 0.6],
      "text-anchor": "top"
    }
  });
});

I'm not sure what all of the things mean (like layout with all icons for example), but that's just taken from the mentioned example, so it should not break anything.

来源：https://stackoverflow.com/questions/47639248/using-an-array-of-longitudes-and-latitudes-to-plot-on-mapbox

标签

javascript

mapbox