0

I have a html selection of the form:

<table class="table">
     <tr>
        <td>
          <label>Afiseaza:</label><br />
          <select id="layer" onchange="search()" class="form-control">
               <option value="Green Area">Teren</option>
               <option value="Building">Constructii</option>

          </select>
        </td>
     </tr>
  </table>

Here we have a function in js which on an onchange event calls for the following:

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); 
           //console.log(b);
           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()
  });

  map.getView().fit(extent);

}

Which would normally have to refresh the map with new geometries ...

This does not happen does anyone know why this phenomenon is happening?

In the console there is no error, just when the page load is executing the function but when I give the onchange do not ...

  • Do you also add your features to the map? In you example code you just read them. – Rob Feb 28 at 10:37
  • @Rob It's reading via synchronous ajax and using them in a new map. But that won't work for refreshing an existing map. – Mike Feb 28 at 13:04
  • ah, my scrollbar was off course invisble... anyways, you can just get the extent of your features by getting layer.getSource().getExtent() on your vector layer – Rob Feb 28 at 13:35
0

If you want fresh an existing map you should create an empty map first, then you can call your search function with a normal asynchronous ajax to clear old features and add new ones

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

    $.ajax({
        type: "GET",
        url: "get_geojson.php?layer="+layer,
        dataType: 'json',
        success: function (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());
            });
            vectorSource.clear();
            vectorSource.addFeatures(features);
            map.getView().fit(extent);
        }
    });

}
  • Thank you very nice! It works correctly! – CoderCoder42 Feb 28 at 20:05

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.