Jquery OpenLayers 4-适合所选功能的范围

又是我。所以，昨天我在缩放到选定的功能时遇到了一些问题，我希望你们中的一些人能把我推向正确的方向。现在

我正在尝试使用Materialize实现自动完成/搜索栏。（这是一个简单的搜索栏）

现在，我要做的是使用geojson特性调用和填充数据，并为所选特性实现适应范围。如果我理解正确，我需要保存所选功能的范围，并将其与一起传递

map.getView().fit(selectedFeature.getSource().getExtent(), animationOptions);

还是我完全错了

$(document).ready(function() {
function sendItem(val) {
    console.log(val);
}

var animationOptions = {
    duration: 2000,
    easing: ol.easing.easeOut
};

$(function() {
    $.ajax({
        type: 'GET',
        url: 'geojson/jls.geojson',
        dataType: 'json',
        success: function(response) {
            var jls_array = response;
            var features = jls_array.features;
            var jls = {};

            for (var i = 0; i < features.length; i++) {
                var geo = features[i].properties;
                jls[geo['JLS_IME']] = null;
            }
            console.log(jls)
            $('input.autocomplete').autocomplete({
                data: jls,
                limit: 5,
                onAutocomplete: function(txt) {
                    sendItem(txt);
                    map.getView().fit(vectorJLS.getSource().getExtent(), animationOptions);
                }
            });
        }
    });
});
});

更新-解决方案

因此，正如FellorDube用逻辑和实用的解决方案很好地指出的那样，他正在使用simple.find（）方法在geojson层源代码中查找特征并缩放选定的特征

在ajax调用之前，我只使用添加的变量调整了一点现有代码

var source_layer = vectorJLS.getSource(); // collecting layer source

$(function() {
    $.ajax({
        type: 'GET',
        url: 'geojson/jls.geojson',
        dataType: 'json'.....

onAutocomplete: function(txt) {
  var feature = source_layer.getFeatures().find(function(f) { return f.get('JLS_IME') === txt; });
  if (feature) {
    const extent = feature.getGeometry().getExtent()
    map.getView().fit(extent);
  }
};

---

这是我试图迭代的图层，并在选择时放大功能

我不确定地图应用程序应该如何工作，但我认为如果您想处理选定的功能（“ol/Interaction/select”），您应该使用选择交互，因为您可以使用触发的所有事件并为您的选择设置自定义样式。选择交互的内容是包含所选功能的ol.集合。因此，除了矢量层之外，您还应该实现选择交互：

const selectedItems = new ol.interaction.Select({
        layers: [yourbasicvectorlayer],
        style: new ol.style.Style({...})
    });
//Listen if any new items are pushed into the selection
selectedItems.getFeatures().on('add', function(feature) {
    //for one feature:
    map.getView().fit(feature.getGeometry().getExtent(), AnimationOptions);
    //for multiple features --> so everytime a new is added
    //Create an empty extent like:
    let extent = new ol.extent.createEmpty();
    selectedItems.getFeatures().forEach(feature) {
        //add extent of every feature to the extent
        extent = new ol.extent.extend(extent, feature.getGeometry().getExtent(); 
    }
    map.getView().fit(extent, animationOptions);
})
// Dont forget to add the Select Interaction to the map
map.addInteraction(selectedItems).
//you can fill the selection interaction programmatically
selectedItems.getFeatures().push(yourfeature);

没有测试代码。选择交互会增加开销，但结构更好。您也可以只使用侦听器中的部件来实现单个多功能方法。

---

如果我完全误解了，请告诉我：-）

功能本身没有范围，但它的几何体有一个范围：

const extent = feature.getGeometry().getExtent()
map.getView().fit(extent);

然而，到目前为止，您似乎没有OpenLayers功能对象，只有一个普通的json对象，这是您在ajax响应中得到的。让我们将其转换为：

var source = new ol.source.Vector({
features: (new ol.format.GeoJSON({
  featureProjection: "EPSG:3765" // probably not required in your case
})).readFeatures(featureCollection);

无需将矢量添加到地图中即可确定特定要素及其范围：

onAutocomplete: function(txt) {
  var feature = source.getFeatures().find(function(f) { return f.get('JLS_IME') === txt; });
  if (feature) {
    const extent = feature.getGeometry().getExtent()
    map.getView().fit(extent);
  }
};

---

加上你的努力1，但公平地说，我需要一些稍微不同的东西。我需要将搜索栏和ajax调用与交互地图交互结合起来，或者更精确地缩放到所选功能的范围。e、 当我在搜索栏中写下“意大利”时，我想自动缩放到该功能。再次感谢您的努力，但我相信我的搜索将继续：）您正在使用源的范围（我假设vectorJLS是一个层），因此您将放大整个层，而不仅仅是一个特定的功能。你想放大到什么？什么不起作用？@dube-True，为了公平起见，我正在尝试迭代槽以放大选择上的特定功能。这非常具有挑战性：）它起作用了。谢谢：）我只需要稍微调整一下代码。我会更新答案。上帝保佑瑞士巧克力：）我有几个功能，我想在视图中显示所有这些功能，是否可以让视图适合多个功能？我得到了它，我只需要

getExtent（）

of

source

var source = new ol.source.Vector({
features: (new ol.format.GeoJSON({
  featureProjection: "EPSG:3765" // probably not required in your case
})).readFeatures(featureCollection);

onAutocomplete: function(txt) {
  var feature = source.getFeatures().find(function(f) { return f.get('JLS_IME') === txt; });
  if (feature) {
    const extent = feature.getGeometry().getExtent()
    map.getView().fit(extent);
  }
};