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...
]
}

可以找到整个文件here。我使用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设置了标识为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进行制图。

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

1 个答案: