Searches by area names in OpenLayers with request of AJAX in the PostGIS database

Question

We built a GeoJSON:

{"type":"FeatureCollection","features":[{"type":"Feature","id":0,"geometry":{"type":"Polygon","coordinates":[[[669023.843,415221.025],[669031.588,415222.415],[669059.365,415154.448],[669064.041,415143.41],[669049.477,415135.059],[668987.876,415095.463],[668934.69,415061.12],[668904.2,415041.659],[668903.285,415044.048],[668934.224,415064.815],[668987.091,415097.897],[669048.669,415137.58],[669057.03,415142.935],[669054.159,415149.762],[669049.569,415160.172],[669045.995,415169.095],[669034.656,415197.283],[669031.864,415205.9],[669023.843,415221.025]]]},"crs":{"type":"EPSG","properties":{"code":"31700"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":0,"id_teren":"2","id_cons":"0","cons":"0","layer":"Green Area","wkb_geometry":"010300000001000000130000002DB29DAFBF6A24419A999919D457194103560E2DCF6A24418FC2F5A8D9571941AE47E1BA066B24411283C0CAC9561941B6F3FD14106B24413D0AD7A39D561941105839F4F26A2441FA7E6A3C7C5619416F1283C0776A244108AC1CDADD55194114AE47610D6A2441AE47E17A5455194166666666D069244160E5D0A2065519412085EB91CE69244177E9263110551941C520B0720C6A2441295C8F4263551941508D972E766A2441002B8796E7551941022B8756F16A24411F85EB5186561941F6285C0F026B2441D5A370BD9B561941B1726851FC6A24415CBA490CB7561941CFF75323F36A24419CC420B0E0561941D8A370FDEB6A244114AE476104571941643BDF4FD56A244183C0CA21755719413F355EBACF6A24419A999999975719412DB29DAFBF6A24419A999919D4571941"}},{"type":"Feature","id":0,"geometry":{"type":"Polygon","coordinates":[[[669023.843,415221.025],[669031.588,415222.415],[669059.365,415154.448],[669064.041,415143.41],[669049.477,415135.059],[668987.876,415095.463],[668934.69,415061.12],[668904.2,415041.659],[668903.285,415044.048],[668934.224,415064.815],[668987.091,415097.897],[669048.669,415137.58],[669057.03,415142.935],[669054.159,415149.762],[669049.569,415160.172],[669045.995,415169.095],[669034.656,415197.283],[669031.864,415205.9],[669023.843,415221.025]]]},"crs":{"type":"EPSG","properties":{"code":"31700"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":0,"id_teren":"2","id_cons":"0","cons":"0","layer":"Green Area","wkb_geometry":"010300000001000000130000002DB29DAFBF6A24419A999919D457194103560E2DCF6A24418FC2F5A8D9571941AE47E1BA066B24411283C0CAC9561941B6F3FD14106B24413D0AD7A39D561941105839F4F26A2441FA7E6A3C7C5619416F1283C0776A244108AC1CDADD55194114AE47610D6A2441AE47E17A5455194166666666D069244160E5D0A2065519412085EB91CE69244177E9263110551941C520B0720C6A2441295C8F4263551941508D972E766A2441002B8796E7551941022B8756F16A24411F85EB5186561941F6285C0F026B2441D5A370BD9B561941B1726851FC6A24415CBA490CB7561941CFF75323F36A24419CC420B0E0561941D8A370FDEB6A244114AE476104571941643BDF4FD56A244183C0CA21755719413F355EBACF6A24419A999999975719412DB29DAFBF6A24419A999919D4571941"}}]}

which puts it on a map of OpenLayers, and here, based on a request in the database according to some search criteria, I return to a table the results I have found. In this table is a button that if you press it and highlights on the map an area whose name I searched for.

I do not know how I might be looking at the geometry that links to that id in GeoJSON so I can color and highlight it as a search result.

So far I have:

function wiev_search_results(id_teren){

    alert(id_teren);


    console.log(map);



}

The function that runs when the button is pressed is: wiev_search_results (id_teren) and as an attribute has id_teren which is the ID that is found in GeoJSON already displayed on the map, you should find this id and color the geometry in another color and zoom on it.

I tried Mike's solution but unfortunately I'm having a problem not running and The feature variable undefined :(

COD:

   function wiev_search_results(id_teren){

    //alert(id_teren);

     var vectorSource = new ol.source.Vector();

    _myStroke = new ol.style.Stroke({
       color : 'yellow',
       width : 4    
    });

    _myFill = new ol.style.Fill({
       color: 'rgba(255,0,0,1.0)'
    });

    selected_polygon_style = new ol.style.Style({
       stroke : _myStroke,
       fill : _myFill
     });

    var feature = vectorSource.forEachFeature(function(feature) {
      if (feature.get('id_teren') == id_teren) return feature;
    });


    if (feature) {
      feature.setStyle(selected_polygon_style);
      map.getView().fit(feature.getGeometry(), { duration: 2000 });
    }

}

Answer 1

Try something like this:

var feature = yourVectorSource.forEachFeature(function(feature) {
  if (feature.get('id_teren') == id_teren) return feature;
});
if (feature) {
  feature.setStyle(yourHighlightStyle);
  map.getView().fit(feature.getGeometry());
}