Фильтр открытых слоев (4.6.5) Geo Json данные от php после ajax вызова - PullRequest
Новая
       46

Фильтр открытых слоев (4.6.5) Geo Json данные от php после ajax вызова

0 голосов
/ 10 января 2020

Я бы хотел отфильтровать мои гео json данные, полученные после ajax вызова в моей базе данных с php. Я хочу сделать это после отправки формы с различными параметрами фильтра, мне удается сделать это с wms-сервером qgis, но не для geo json. Вот пример файла Geo json: 

{"type": "FeatureCollection","features": [
{
  "type": "Feature",
  "geometry": {
    "type": Polygon
    "coordinates": [
      [4.079580117,43.578303733],
      [4.079977334,43.578757281]
    ]
  },
  "properties": {
    "nom":"le Grau-du-Roi,
    "agence":"MONTCALM"
    "date_prosp":"2018-06-04 00:00:00"
    "superficie":"5.43"
    "distance":"2617.39"
    "espece":"98",
    "densite":"4"
  }
}}

Вот часть кнопки в форме html: 

<input type="button" id="envoi" value="confirmer" class="btn btn-primary btn-sm">
      <input type="reset" class="btn btn-danger btn-sm">
 </form>

Я прошел много вопросы, и я много продвинулся в этом вопросе и в этом вопросе тоже

Я создал переменную фильтра и мне удалось заполнить ее некоторыми параметрами, такими как geo json. Когда я вызываю функцию фильтра и обновляю источник слоя, карта не обновляется и остается пустой. 

var fGeoJSON = function(extent, resolution, projection) {
    var url = 'parcelle2.php';
    $.ajax({
      type:'GET',
      url: url,
    })
    .then(function(response) {
      var format = new ol.format.GeoJSON();
      var features = format.readFeatures(response,{featureProjection: projection});
      //  console.log(response);
      sourceDemo.addFeatures(features);
      });
    };

    // GeoJSON source
    var sourceDemo = new ol.source.Vector({
      loader: fGeoJSON,
      strategy: ol.loadingstrategy.all
    });
    // console.log(sourceDemo)

    // Layer
        var demo = new ol.layer.Vector({
            source: sourceDemo,
    title: "geojson",
    visible: true,
  });

Установка фильтра: 

// create var filteredGeoJSON
var filteredGeoJSON = {
    type: "FeatureCollection",
    features: []
    };
    console.log(filteredGeoJSON)

    // fill empty features by filtering the sourceDemo (geojson source from ajax call)
    function filterGeoJSON (nom, espece) {
    sourceDemo.getFeatures().forEach(function(feature){
        var cityName = feature.get('nom');
        // console.log(cityName)
        // console.log(feature.get('nom') == 'Montpellier')

        if (feature.get('nom') == nom && feature.get('espece') == espece ) {
        filteredGeoJSON.features.push(feature);
        }
    });
    }

    // new vector source
    var filteredSource = new ol.source.Vector({
    format: new ol.format.GeoJSON().readFeatures(filteredGeoJSON, {
        featureProjection: "EPSG:3857"
    })
});

Я использую jquery для отправки формы обновите демонстрационный слой, но слой просто исчезнет с карты 

$(document).ready(function(){
    $("#envoi").on("click", function filtreDynamique(){
    // clear filteredGeoJSON
    filteredGeoJSON = {
        type: "FeatureCollection",
        features: []
    };
    filteredSource = new ol.source.Vector({
        loader: filterGeoJSON('Montpellier', '97')
    })
    console.log(filteredGeoJSON)

    demo.setSource(filteredSource);

    //  map.addLayer(filteredLayer)
    }); 
});
...