Используя Mapbox, у меня есть фильтр ввода.По мере ввода я хотел бы, чтобы точки фильтровались по словам на входе - PullRequest
Новая
       9

Используя Mapbox, у меня есть фильтр ввода.По мере ввода я хотел бы, чтобы точки фильтровались по словам на входе

0 голосов
/ 28 февраля 2019

Ниже у меня есть код, который в основном фильтрует при перемещении по представлению, что хорошо.Однако я хотел бы также включить в него часть, которая бы заставляла точки исчезать при вводе текста в строке поиска. 

function renderListings(features) {
  listingEl.innerHTML = '';
  var sortedFeatures = sortedFeatures = features.sort(function (a, b) {
    if (a.properties.Project_Year < b.properties.Project_Year) {
      return 1;
    }

    if (a.properties.Project_Year > b.properties.Project_Year) {
      return -1;
    }

    return a.properties.Project_Name.localeCompare(b.properties.Project_Name);
  });

  if (sortedFeatures.length) {
    sortedFeatures.forEach(function (f) {
      var prop = f.properties;
      var name = prop.Project_Name;
      var date = prop.Project_Year;
      var link = "http://placekitten.com/200/300";
      var card = ppgcard(name, date, link);
      listingEl.innerHTML += card;
    });
  } else {
    var empty = document.createElement('p');
    empty.textContent = 'No records currently in view';
    listingEl.appendChild(empty);
    ppg_map.setFilter('point_layer', ['has', 'Project_Name']);
  }
}

function getUniqueFeatures(array, comparatorProperty) {
  var existingFeatureKeys = {};
  var uniqueFeatures = array.filter(function (el) {
    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
      return false;
    } else {
      existingFeatureKeys[el.properties[comparatorProperty]] = true;
      return true;
    }
  });
  return uniqueFeatures;
}

var searchTerms = projects.features.map(function (p) {
  return p.properties.Project_Name;
}); // console.log(projects);

ppg_map.on('load', function () {
  ppg_map.addSource('line', {
    "type": "geojson",
    "data": line_source
  }); 

  ppg_map.addLayer({
    "id": "line_layer",
    "type": "line",
    "source": "line",
    "minzoom": 13,
    "paint": {
      "line-color": "#e9421c",
      "line-width": 8,
      "line-opacity": 0.3
    },
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    }
  });
  ppg_map.addSource('point', {
    "type": "geojson",
    "data": point_source
  });
  ppg_map.addLayer({
    "id": "point_shadow",
    "source": "point",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "#000000",
      "circle-opacity": 0.5,
      "circle-blur": 2,
      "circle-translate": [6, 6]
    }
  });
  ppg_map.addLayer({
    "id": "point_layer",
    "source": "point",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "#e9421c",
      "circle-stroke-width": 3,
      "circle-stroke-color": "#FFFFFF"
    }
  });

В Mapbox приведен пример кода

https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

Однако я не уверен, как включить его в мой код и включить мои текущие и новые функции.

...