使用Mapbox GL JS为地理编码器补充本地数据 [英] Supplement local data for geocoder using Mapbox GL JS

问题描述

我正在运行几个设施的位置地图以及它们的名称和坐标数据。我希望地理编码器能够搜索设施的名称。

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"

编辑添加了此代码，其中包含新的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
}));

推荐答案

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

getSource不是PANKR代码中的函数，所以我认为您的意思是编写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());

这篇关于使用Mapbox GL JS为地理编码器补充本地数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！