在 Mapbox GL JS 中将 buildLocationList() 与外部 GeoJSON 文件一起使用

Question

我正在制作一个网络地图，它只需要在点击时飞到不同的位置，就像这个 Mapbox GL 示例 (https://docs.mapbox.com/help/tutorials/building-a-store-locator/#getting-started) 一样。但是，我正在尝试从外部文件加载 GeoJSON 功能，我可以获得要显示的点而不是列表项。基本上，我无法弄清楚如何使用此方法从 (buildLocationList(stores);) 开始构建列表。有没有办法将外部 GeoJSON 文件的变量名称设置为 'stores.' 任何帮助将不胜感激。

var stores = "https://raw.githubusercontent.com/aarontaveras/Test/master/sweetgreen.geojson";

map.on('load', function () {
// Add the data to your map as a layer
map.addLayer({
    id: 'locations',
    type: 'symbol',
    // Add a GeoJSON source containing place coordinates and information.
    source: {
        type: 'geojson',
        data: stores
    },
    layout: {
        'icon-image': 'circle-15',
        'icon-allow-overlap': true,
    }
});

// Initialize the list
buildLocationList(stores);
});

function buildLocationList(data) {
for (i = 0; i < data.features.length; i++) {
    // Create an array of all the stores and their properties
    var currentFeature = data.features[i];
    // Shorten data.feature.properties to just `prop` so we're not
    // writing this long form over and over again.
    var prop = currentFeature.properties;
    // Select the listing container in the HTML
    var listings = document.getElementById('listings');
    // Append a div with the class 'item' for each store 
    var listing = listings.appendChild(document.createElement('div'));
    listing.className = 'item';
    listing.id = "listing-" + i;

    // Create a new link with the class 'title' for each store 
    // and fill it with the store address
    var link = listing.appendChild(document.createElement('a'));
    link.href = '#';
    link.className = 'title';
    link.dataPosition = i;
    link.innerHTML = prop.address;

    // Create a new div with the class 'details' for each store 
    // and fill it with the city and phone number
    var details = listing.appendChild(document.createElement('div'));
    details.innerHTML = prop.city;
    if (prop.phone) {
        details.innerHTML += ' &middot; ' + prop.phoneFormatted;
    }

我能够轻松地从外部源加载数据，但仍在努力构建列表。

var stores = 'https://raw.githubusercontent.com/aarontaveras/Test/master/sweetgreen.geojson';

map.on('load', function () {
map.addSource("locations", {
    type: 'geojson',
    data: stores
});
map.addLayer({
    "id": "locations",
    "type": "symbol",
    "source": "locations",
    "layout": {
        'icon-image': 'circle-15',
        'icon-allow-overlap': true,
    }
});
});

Answer 1

Mapbox GeoJSON 来源 data 属性可以是 URL GeoJSON 文件，或内联 GeoJSON。因此，您可以获取 GeoJSON 数据并将其直接传递给源并使用它来构建您的位置列表。

考虑示例：

map.on('load', () => {
  fetch(stores)
    .then(response => response.json())
    .then((data) => {
      map.addSource("locations", {
        type: 'geojson',
        data: data
      });

      map.addLayer(...);

      buildLocationList(data);
    });
});

在 Mapbox GL JS 中将 buildLocationList() 与外部 GeoJSON 文件一起使用

Using buildLocationList() with an external GeoJSON file in Mapbox GL JS

javascript

geojson

mapbox-gl-js