使用 Mapbox GL JS 为地理编码器补充本地数据

Question

我正在绘制一些设施的位置地图，其中包含它们的名称和坐标数据。我希望地理编码器能够搜索设施的名称。

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 未定义

可以在这里看到一个正在工作的 plunker https://plnkr.co/edit/UUaf6OCgvoavwshdUdN9?p=preview

预期结果：地理编码器将 .geojson 数据调用到搜索字段中 实际结果：Geocoder 找不到 .geojson。

错误：“myData 未定义”

edit 添加了包含新 var 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
}));

修复：

复制并粘贴您的 geojson 到：

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
}));

Answer 1

TL;DR：getSource 不是函数，您需要重新请求数据。

getSource 不是您 plunkr 代码中的函数，所以我认为您的意思是写 map.getSource。即便如此，map.getSource 也不会将原始 GeoJSON 数据返回给您。看看这个issue on Github in the mapbox-gl-js repository。

Vladimir 的建议是通过fetch 请求数据，看起来像这样：

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