0

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

}
2

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());
}
  • Please help me the rezolv this problem because I fail to realize :( – CoderCoder42 Mar 24 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.