OpenLayers 4 - 适合所选特征的范围

Question

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

我正在尝试使用 Materialize Materialize Framework实现自动完成/搜索栏。（这是简单搜索栏的小提琴示例）

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });

现在，我想要做的是使用 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);
                }
            });
        }
    });
});
});

这是我的 geojson 对象的示例

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":"EPSG:3765" } },
"features": [
{ "type": "Feature", "properties": { "JLS_MB": "00116", "JLS_IME": "BEDEKOV?INA", "JLS_ST": "OP", "JLS_SJ": "Bedekov?ina", "ZU_RB": "02", "ZU_IME": "Krapinsko-zagorska", "ZU_SJ": "Krapina", "pov": 51.42 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 461117.98, 5108379.85 ], [ 461124.53, 5108368.39 ], [ 461132.37, 5108354.26 ]...

更新 - 解决方案

因此，正如Dube同事通过逻辑和实用的解决方案很好地指出的那样，他使用简单的 .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);
  }
};

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

Answer 1

该要素本身没有范围，但它的几何体有范围：

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);
  }
};