Использование buildLocationList () с внешним файлом GeoJSON в Mapbox GL JS - PullRequest
Новая
       18

Использование buildLocationList () с внешним файлом GeoJSON в Mapbox GL JS

3 голосов
/ 16 марта 2019

Я работаю над веб-картой, которая требует щелчка мышью в разных местах, как в этом примере 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,
    }
});
});

1 Ответ

0 голосов
/ 18 марта 2019

Mapbox GeoJSON Sources 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);
    });
});
...