Дополнение локальных данных для геокодера с помощью Mapbox GL JS - PullRequest
Новая
       19

Дополнение локальных данных для геокодера с помощью Mapbox GL JS

2 голосов
/ 24 мая 2019

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

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

Как я могу преобразовать этот код в работу для моего примера?

Я попытался перезвонить мой набор данных в код геокодера с помощью 

  var myData =getSource('BRdata');

затем звоните 

 for (var i = 0; i < myData.features.length; i++) {
    var feature = myData.features[I];

// handle queries with different capitalization than the source data by calling toLowerCase()
     if (feature.properties.HandlerId.toLowerCase().search(query.toLowerCase()) !== -1) {

     feature['place_name'] = '? ' + feature.properties.HandlerId;
     feature['center'] = feature.geometry.coordinates;
      matchingFeatures.push(feature);
 }
}
  return matchingFeatures;
}

чтобы получить данные в геокодер, но они не работают. Я получаю ошибку "

myData не определен

Работающий поршень можно увидеть здесь https://plnkr.co/edit/UUaf6OCgvoavwshdUdN9?p=preview

Ожидаемый результат: геокодер вызовет данные .geojson в поле поиска. Фактический результат: геокодер не может найти .geojson.

Ошибка: «myData не определен»

edit добавил этот код, который включает новую переменную myData: 

    function forwardGeocoder(query) {
  // Fetch data on server and serve me the raw geojson
  var myData = fetch('test-plnkr.json').then(res => res.json());
    var matchingFeatures = [];
    for (var i = 0; i < myData.features.length; i++) {
    var feature = myData.features[i];
    // handle queries with different capitalization than the source data by calling toLowerCase()
    if (feature.properties.HandlerId.toLowerCase().search(query.toLowerCase()) !== -1) {
    // add a tree emoji as a prefix for custom data results
    // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
    feature['place_name'] = '? ' + feature.properties.HandlerId;
    feature['center'] = feature.geometry.coordinates;
    //feature['place_type'] = ['park'];
    matchingFeatures.push(feature);
    }
    }
    return matchingFeatures;
    }

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: "Enter search e.g. Lincoln Park",
mapboxgl: mapboxgl
}));

FIX:

Скопируйте и вставьте ваш геойсон внутри: 

var customData = { *your geojson data* }

, затем загрузите геокодер, используя приведенный ниже код 

function forwardGeocoder(query) {
var matchingFeatures = [];
for (var i = 0; i < customData.features.length; i++) {
var feature = customData.features[i];
// handle queries with different capitalization than the source data by      calling toLowerCase()
if     (feature.properties.yourPropertyId.toLowerCase().search(query.toLowerCase())   !== -1) {
// add a tree emoji as a prefix for custom data results

feature['place_name'] = '? ' + feature.properties.yourPropertyId;
feature['center'] = feature.geometry.coordinates;
//feature['place_type'] = ['park'];
matchingFeatures.push(feature);
}
}
return matchingFeatures;
}

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 13,
placeholder: "search for building here",
mapboxgl: mapboxgl
}));

1 Ответ

3 голосов
/ 24 мая 2019

TL; DR: getSource не является функцией, и вам нужно повторно запрашивать ваши данные.

getSource не является функцией в вашем коде plunkr, поэтому я думаю, что вы хотели написать map.getSource.Тем не менее, map.getSource не вернет вам необработанные данные GeoJSON.Проверьте эту проблему на Github в репозитории mapbox-gl-js .

. Владимир предлагает запросить данные, выполнив для них fetch, что будет выглядеть примерно так:это: 

// Fetch data on server and serve me the raw geojson
var myData = fetch('data.json').then(res => res.json());
...