0

I'm trying to look for matching in the geosynthe loadloaded on openlayers when a user clicks on a button in that table then the button sends the element id and I want to color it in another color and zoom in on it to see it better. ..

Here is the code:

<script>



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

  var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        new ol.layer.Vector({
            source: vectorSource
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
            attributionOptions:
                ({
                    collapsible: false
                })
        }).extend([
            new ol.control.OverviewMap(),
            new ol.control.FullScreen(),
            new ol.control.ScaleLine()

        ]),
        interactions: [
            new ol.interaction.DragRotateAndZoom(),
            new ol.interaction.MouseWheelZoom(),
            new ol.interaction.DragPan(),
            new ol.interaction.DoubleClickZoom()
        ],
    view: new ol.View()
  });





////===========================================================




function search(){


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

  var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        new ol.layer.Vector({
            source: vectorSource
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
            attributionOptions:
                ({
                    collapsible: false
                })
        }).extend([
            new ol.control.OverviewMap(),
            new ol.control.FullScreen(),
            new ol.control.ScaleLine()

        ]),
        interactions: [
            new ol.interaction.DragRotateAndZoom(),
            new ol.interaction.MouseWheelZoom(),
            new ol.interaction.DragPan(),
            new ol.interaction.DoubleClickZoom()
        ],
    view: new ol.View()
  });

//-----------------------------------------------------------------------



    var layer = "WEBCADGEN.DBO";
    console.log(layer);

    proj4.defs('EPSG:31700','+proj=sterea +lat_0=46 +lon_0=25 +k=0.99975 +x_0=500000 +y_0=500000 +ellps=krass +towgs84=28,-121,-77,0,0,0,0 +units=m +no_defs');                      
    ol.proj.proj4.register(proj4);

    $.ajax({
        type: "GET",
        url: "m_server.php?layer="+layer,
        dataType: 'json',
        success: function (response) {
            console.log(response);
            var features = new ol.format.GeoJSON().readFeatures(response);
            var extent = ol.extent.createEmpty();
            features.forEach(function(feature){
                feature.setId(undefined);
                feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
                ol.extent.extend(extent, feature.getGeometry().getExtent());

             var teren_stile = new ol.style.Style({
                fill: new ol.style.Fill({color: '#00802b'}),
                stroke: new ol.style.Stroke({
                  color: [0,0,230], width: 1
                }),
              text: new ol.style.Text({
                font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
                placement: 'center',
                fill: new ol.style.Fill({
                  color: 'white'
                })
              })
            });

            var casa_stile = new ol.style.Style({
                fill: new ol.style.Fill({color: '#333300'}),
                stroke: new ol.style.Stroke({
                  color: [204,255,102], width: 1
                }),
              text: new ol.style.Text({
                font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
                placement: 'center',
                fill: new ol.style.Fill({
                  color: 'white'
                })
              })
            });


            var data = "T:"+feature.get('tarla')+"/P:"+feature.get('parcela')+"/S:"+feature.get('suprafata')+" MP.";
            //var teren = feature.get('id_teren');
            //console.log(data);



            if(feature.get('layer') == "Green Area"){
                teren_stile.getText().setText(data);
                feature.setStyle(teren_stile);
            }else{
                casa_stile.getText().setText(data);
                feature.setStyle(casa_stile);
            }




            });

            vectorSource.clear();
            vectorSource.addFeatures(features);
            map.getView().fit(extent);



    }
}); 



}    

function s_par(){


    var q = $('#q').val();
    var col = $('#coloana').val();

    $('#map').css('height','500');
    $('#info_panel').animate({height:"show"},500);

    $.post("server.php", 
       {
        q: q,
        col: col
        }, function(result){

            //console.log(result);

            $('#info_panel').html("");
            $('#info_panel').html(result);


            })



}




var selectedFeature;
function search_results(id){

    //alert(id_parcela);


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

    //console.log(feature);


    deselected_polygon_style = new ol.style.Style({
                fill: new ol.style.Fill({color: '#f5f7f6'}),
                stroke: new ol.style.Stroke({
                  color: [0,0,230], width: 1
                }),
              text: new ol.style.Text({
                font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
                placement: 'center',
                fill: new ol.style.Fill({
                  color: 'white'
                })
              })
            });

    console.log(vectorSource);
    var feature = vectorSource.forEachFeature(function(feature) {
        console.log("feautures");
        console.log(feature);
      if (feature.get('id_parcela') == id) return feature;
    });

    console.log(feature);


    // reset any previous selected feature and remember this one
       if (selectedFeature) { selectedFeature.setStyle(deselected_polygon_style); }
       selectedFeature = feature;



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


}




$(document).ready(function(){  search(); });

</script>

What does not work is that in search_results (id) here console.log (vectorSource); it returns undefined and simply in feature is nothing, so automatically i can not make the condition if and the fit.

How can I put in that finsource that vectorSource?

  • 1
    Try feature.getKeys() and/or feature.getProperties() to check what are actual keys/properties in your features. – TomazicM Jul 3 at 19:42

Your Answer

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

Browse other questions tagged or ask your own question.