如何通过jQuery-UI自动完成功能从GeoJSON中选择坐标？

Question

我正在尝试创建一个简单的地址解析器，该服务将名称或地址转换为坐标。 我有一个简单的GeoJSON文件，就像这样：

{"type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "Name": "GOLM, HAUS 25, INSTITUT FÜR BIOCHEMIE UND CHEMIE", "Art": "universität" }, "geometry": { "type": "Point", "coordinates": [ 12.97433, 52.410289 ] } },
{ "type": "Feature", "properties": { "Name": "GOLM, HAUS 25, INSTITUT FÜR BIOLOGIE", "Art": "universität" }, "geometry": { "type": "Point", "coordinates": [ 12.97433, 52.410289 ] } },
//cont...
]
}

整个文件可以在这里找到。 我正在使用jQuery-UI提供具有自动完成功能的输入表单，但是它应该仅搜索每个功能的名称，即，当我键入“ Golm”时，它将显示名称中带有“ Golm”的每个功能。

用户从下拉列表中选择名称后，应选择要素坐标作为变量以将其放置在地图上。

谁能提供一个起点？ 到目前为止，我发现我可以使用JSON文件作为.autocomplete函数的源，即：

    $('#tags').autocomplete({
        source: 'standorte.geojson',
        minLength: 1,
        dataType: 'json'
    });

我将不胜感激任何帮助。 提前致谢！

Answer 1

我的GeoJson结构如下：

{
"type":"FeatureCollection",
"features":[
    {"type":"feature",
        "geometry":{
        "type":"Point",
        "coordinates":[-1.8988,52.4776]
    },
    "properties":{
        "name":"Birmingham New Street Railway Station (BHM)",
        "category":"Train Station",
        "count":2}
    },
    {"type":"feature",
    "geometry":{
        "type":"Point",
        "coordinates":[-1.7337,52.4528]
    },
    "properties":{
        "name":"Birmingham Airport (BHX)",
        "category":"Airport",
        "count":2}
    },
    {"type":"feature",
    "geometry":{
        "type":"Point",
        "coordinates":[-1.7253,52.4507]
    },
    "properties":{
        "name":"Birmingham International Railway Station (BHI)",
        "category":"Train Station",
    "count":2}
}]}

并使用此javascript设置ID为element_id_autosuggest_geosjon的元素的值。 可以扩展到GeoJson源中的所有对象。

$("#element_id_autosuggest_geosjon").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: '/path/to/json',
            dataType: 'json',
            data: { term: request.term },
            success: function( data ) {
                response($.map( data.features, function(item) {
                    return {
                        // match the objects to variables here
                        // do this for all of your objects
                        label: item.properties.name,
                        lon: item.geometry.coordinates[0],
                        lat: item.geometry.coordinates[1],
                        category: item.properties.category
                    };
                }));
            }
        });
    },
    select: function(event, ui) {
        // loop through the objects
        $.each(ui, function(key, element) {
            // set the value of the element with the variable
            $("#element_id_autosuggest_geosjon").val(element.label);
            $("#category").val(element.category);
            $("#location_geo_lon").val(element.lon);
            $("#location_geo_lat").val(element.lat);
        });
    }
});

您可以使用http://jquerygeo.com进行映射。