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

我不確定您的地圖應用程序應如何工作，但我想如果要處理選定的功能（“ ol / interaction / select”），則應該使用Select-Interaction，因為您可以使用所有觸發的事件並設置自定義樣式供您選擇。 “選擇交互”的內容是一個ol.Collection，其中包含您選擇的功能。 因此，除了Vectorlayer之外，您還應該實現Select-Interaction：

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

沒有測試代碼。 使用Select-Interaction，其開銷更大，但結構更好。 您也可以僅將偵聽器中的該部分用於單重功能。 讓我知道我是否完全誤會了:-)

Answer 2

要素本身不具有范圍，但是其幾何圖形具有一個范圍：

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

但是，到目前為止，您似乎還沒有在ajax響應中獲得的OpenLayers功能對象，只是一個普通的json對象。 讓我們對其進行轉換：

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