使用自动完成功能进行搜索后缩放 [英] Zoom after search using autocomplete

问题描述

搜索后如何操作，放大地图上的值？我的代码是：

How to do after a search, zoom in on the value found on the map? My code is:

$("#txtSearch").autocomplete({
    source: setoresComerciais.features.map(function(d){
        return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc
    }),
    select: function(event, ui){
        map.fitBounds(stComerciaisLayer.getBounds(ui.item.value));
    } 
});

首先，我得到返回d.properties.sco_num_sc + - + d.properties.sco_dsc_loc ，这个回报，例如：1 - FORTALEZA
之后，我使用select，哪里有param ui，什么时候 ui.item.value 返回1 - FORTALEZA，所以这个：

First, I get return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc, this return, for example: "1 - FORTALEZA" After, I use select, where have the param ui, when do ui.item.value return "1 - FORTALEZA", so this:

map.fitBounds(stComerciaisLayer.getBounds(ui.item.value));

其中：

stComerciaisLayer = L.geoJSON(setoresComerciais, {
                style: function (feature) {
                    return feature.properties && feature.properties.style;
                },
                onEachFeature: onEachFeature,
(...)

这是准确的回归我想要什么，搜索的结果和放大，但不起作用。我做错了什么？

It was to return exactly what I wanted, the result of the search and the zoom in it, but don't work. What did I do wrong?

推荐答案

这一行：

map.fitBounds(stComerciaisLayer.getBounds(ui.item.value));

将不会按预期工作。从API文档中，getBounds（）不接受任何参数，它只返回你正在使用它们的图层的边界。由于图层包含你所有的geojson，这将不起作用。

won't work as intended. From the API documentation, getBounds() doesn't take any arguments, it just returns the bounds of they layer you are working with. As the layer includes all your geojson, this won't work.

相反，我们可以从你的geojson获得所选特征的geojson FeatureCol lection，从中创建一个图层（我们不需要将它添加到地图中），这样我们就可以找到它的边界并相应地更新地图。

Instead, we can get the selected feature's geojson from your geojson FeatureCollection, and from that make a layer (we don't need to add it to the map), so that we can find its bounds and update the map accordingly.

我们如何在geojson中获得适当的功能？有几种方法，我们可以使用字典，或者我们可以将其他数据添加到自动完成功能源（如另一个答案所示）。我会在另一个答案中跟随领先，但使用该功能的增量并继续使用.map（）：

How do we get the proper feature in the geojson? There are a few approaches, we could use a dictionary, or we could add additional data to the autocomplete function source (as suggested in the other answer). I'll follow the lead in the other answer, but use the increment of the feature and continue to use .map() :

source: setoresComerciais.features.map(function(d,i){
    return {
      label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc, 
      id: i 
    };

这里.map有两个变量： d 是正在处理的features数组中的当前项， i 是该功能的索引。使用索引，我们可以轻松访问正确的要素数组中的项目，从中创建一个图层，并使地图边界适合该要素的图层：

Here .map takes two variables: d is the current item in the features array being processed, and i is the index of that feature. With the index, we can easily access the proper item in the features array, make a layer out of it, and fit the map bounds to that feature's layer:

select: function(event, ui){
    var feature = setoresComerciais.features[ui.item.id]; // get the geojson
    var featureLayer = L.geoJSON(feature)  // create a layer from it
    map.fitBounds(featureLayer.getBounds()); // resize the map
} 

总而言之，这给了我们：

Altogether, that gives us:

    $("#txtSearch").autocomplete({
        source: setoresComerciais.features.map(function(d,i){
            return {label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc, id: i };
        }),
        select: function(event, ui){
            var feature = setoresComerciais.features[ui.item.id];
            var featureLayer = L.geoJSON(feature)
            map.fitBounds(featureLayer.getBounds());
        } 
    });

这篇关于使用自动完成功能进行搜索后缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！