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