0

I'm trying to make a piece of code that when I click on the map to return GeoJSON property data that I clicked on.

I tried this way:

map.on('click', function(e){
     //console.log(evt);
    //coordinate = evt.coordinate;

    var feature = map.forEachFeatureAtPixel(e.pixel,
            function(feature) {
              return feature;
    });

    var coordinate = e.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:31700', 'EPSG:3857'));

    console.log(feature);

     if (feature) {
                var props = feature.O;
                console.log(props.text);

                }       
});

Here is the code:

function search(){


    var layer = $('#layer').val();

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

//var geojson = $.getJSON('json/geojson.json', function(data) { return data });
//var geojson1 = {"type":"FeatureCollection","features":[{"type":"Feature","id":"2","geometry":{"type":"LineString","coordinates":[[698282.236,377375.758],[698289.591,377372.136],[698183.88,377182.298],[698182.72,377197.045],[698282.236,377375.758]]},"crs":{"type":"EPSG","properties":{"code":"31700"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":"2","area_id":"2","building_id":"2","type":"test","area":"test","owner":"test","description":"test","administration":"test","address":"test","property":"test","layer":"Green Area","extendedentity":null,"linetype":"test","entityhandle":null,"text":"test","wkb_geometry":"01020000000500000000FED478544F2541002731087F081741408D972E634F25418195438B70081741295C8FC28F4E254181E92631790517410AD7A3708D4E2541027B142EB405174100FED478544F2541002731087F081741"}}]}



//in cazul in care dorim direct din GeoJson 
//$.getJSON('json/geojson.json', processGeoJSON );

  //console.log(geojson);

  if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); }

    var features;

   $.ajax({
        type: "GET",
        url: "get_geojson.php?layer="+layer,
        dataType: 'json',
        async: false,
        success: function (response) {
           console.log(response); 
           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 map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: features
            })
        })
    ],
    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()
  });


  //console.log("ok");
  if(map.getView().fit(extent)){
    console.log("ok");
  }else{
    console.log("ng");
  }



  map.on('click', function(e){
     //console.log(evt);
    //coordinate = evt.coordinate;

    var feature = map.forEachFeatureAtPixel(e.pixel,
            function(feature) {
              return feature;
    });

    var coordinate = e.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:31700', 'EPSG:3857'));

    console.log(feature);

     if (feature) {
                var props = feature.O;
                console.log(props.text);

                }


});

}

GeoJSON:

{"type":"FeatureCollection","features":[{"type":"Feature","id":"1","geometry":{"type":"LineString","coordinates":[[669014.04,415175.438],[669021.134,415178.066],[669024.457,415169.094],[669017.363,415166.466],[669014.04,415175.438]]},"crs":{"type":"EPSG","properties":{"code":"31700"}},"geometry_name":"wkb_geometry","properties":{"ogc_fid":"1","area_id":"1","building_id":"2","type":"test","area":"test","owner":"1","description":"test","administration":"test","address":"12","property":"12","layer":"Building","extendedentity":null,"linetype":"1","entityhandle":null,"text":"test","wkb_geometry":"01020000000500000049E17A14AC6A24416B1283C01D571941A9C69B44BA6A2441FB332343285719416DE7FBE9C06A244137894160045719410B02DBB9B26A2441AA67A1DDF956194149E17A14AC6A24416B1283C01D571941"}}]}

But when I check feature is a message of undefined :( Please be nice to help me get stuck for 3 days with him and I have no idea

  • You have many console.log statements, for which one exactly do you get "undefined"? – bugmenot123 Feb 28 at 9:35
  • Try var props = feature.getProperties(); console.log(JSON.stringify(props)); – Mike Feb 28 at 13:28
  • does not work returns error Uncaught TypeError: Cannot read property 'getProperties' of undefined – CoderCoder42 Feb 28 at 19:57
  • if (feature) { wouldn't be true if feature was undefined – Mike Mar 1 at 9:49

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.