1

I try a selection of object with OpenLayers 3.5.0 but she doesn't work correctly.

I make a code like this when I click on the map :

var map;
var selection;

function init ()
{

    /* SCU */
    proj4.defs("EPSG:4875","+proj=lcc +lat_1=44.25 +lat_2=48.75 +lat_0=43 +lon_0=3 +x_0=1700000 +y_0=2400000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
    proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs");
    proj4.defs("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs");

    /* Functions */
    function transform(extent) 
    {
        return ol.proj.transformExtent(extent, 'EPSG:4875', 'EPSG:3857');
    }

    /* Controls */
    var map_controles =
        [
        new ol.control.MousePosition({projection: 'EPSG:4875',coordinateFormat: ol.coordinate.createStringXY(2)}),
        new ol.control.Attribution(),
        new ol.control.Zoom(),
        new ol.control.ZoomToExtent({extent: transform([3541201,2271450, 1420157,2230936])})
        ];

    /* layers */
    /* baselayer */
    var osm                 = new ol.layer.Tile({source: new ol.source.OSM ()});

    /* vector layer */              
    var vactor_layer    = new ol.layer.Vector({
                                    source: new ol.source.Vector({
                                        url: 'data/geojson/myvector.geojson',
                                        format: new ol.format.GeoJSON({defaultDataProjection :'EPSG:4875', projection: 'EPSG:3857'})
                                    }),
                                    name: 'Mask',
                                    style: new ol.style.Style   
                                    ({
                                        fill:   new ol.style.Fill   ({color: 'rgba(255, 255, 255, 0.6)'}),
                                    })});

    /* map parameters */
    map = 
        new ol.Map  ({
            layers: [mapquest,vactor_layer],
            target: document.getElementById('map'),
            controls: map_controles,
            view: new ol.View({zoom: 11.20,minZoom: 11.20,maxZoom: 17, center: transform([3541001,2251475,1403890,2251475]),extent: transform([3541201,2271450, 1420157,2230936])})
                    });
    // Popups 
    // Map interaction

    var popup = new ol.Overlay.Popup;
    popup.setOffset([0, -55]);
    map.addOverlay(popup);

    map.on('click', function(evt) {

        // Layer
        var recup_layer = map.forEachLayerAtPixel(
            evt.pixel,
            function(ft, layer){return ft;}
        );

        // Properties
        var recup_prop = map.forEachFeatureAtPixel(
            evt.pixel,
            function(ft, layer){return ft;}
        );

        // SELECTION //

        // Style 1 - The overlay of selection
        var overlay_selection = new ol.FeatureOverlay ({
            map: map,
            name: 'Sélection',
            style: new ol.style.Style 
                ({
                image: new ol.style.Circle
                    ({radius: 7,stroke: new ol.style.Stroke ({color: 'rgb(0, 255, 255)',width: 2})
                })
            })
        });

        // Gestion of the overlay with a global variable : selection
        if (recup_prop != selection) {
            if (typeof(selection) !== 'undefined') 
            {
                overlay_selection.removeFeature(selection);
            }
            if (typeof(recup_prop) !== 'undefined') 
            {
                overlay_selection.addFeature(recup_prop);
            }
        selection = recup_prop;
        };

        if (recup_layer && recup_layer.get('name') == 'Mask') {

            var geometry = recup_prop.getGeometry();
            var coord = geometry.getCoordinates();

            var content = ("<div id='tad_close_popup' )'></div><div id='tad_text_popup'><p>Arr&ecirc;t "+  recup_prop.get('num') + "</p><p>"+  recup_prop.get('name') + "</p></div>");

            popup.show(coord, content);

        }

    }); 
}

So, when I click on an object, Style 1 appear on this object, but if I click on a second object, both objects become like style 1 and removeFeature doesn't work.

I tried too, the method :

overlay_selection.getFeatures(selection).clear();

but the result is the same.

  • It's not easy to know what's going on. I really advice you ... put your code online. There are so many options. – Jonatas Walker May 29 '15 at 13:00
  • Okay, thank you Jonatas, I give you the complete code of my javascript – Geo-x May 29 '15 at 14:47
  • Oh, perhaps I was not clear enough. I suggest you to put your code on a JSFiddle or Plunker – Jonatas Walker May 29 '15 at 14:50
  • This is the link for pluncker : link – Geo-x Jun 1 '15 at 8:51
2

Thx for the plunker it's easier to debug :) .

First of all, your problem is that you create a FeatureOverlay each time you click on the map, so when you click on the two features you create 2 different FeatureOverlay with the style1.

What you want is to declare your FeatureOverlay outside the callback of click event:

// Style 1 - The overlay of selection
var overlay_selection = new ol.FeatureOverlay ({
    map: map,
    name: 'Sélection',
    style: new ol.style.Style 
        ({
            fill: new ol.style.Fill({color: 'rgba(0,255,255,0.9)'})
        })
    // })
});

// Selection

map.on('click', function(evt) {
......

Second, it seems what you try to do is natively and nicely done by the Select interaction, see:

example: http://openlayers.org/en/master/examples/select-features.html

api: http://openlayers.org/en/master/apidoc/ol.interaction.Select.html

  • Than you for your help oterral. I seen the link of this example but I've a problem with the selection with new ol.interaction.Select. When I select my object the selection mask my object, and I want to see my object under my selection. – Geo-x Jun 1 '15 at 12:13
  • Hey @Geo-x, you should update your plunker with this answer, and after that, we jump to the next issue; – Jonatas Walker Jun 1 '15 at 12:22
  • Okay excuse me Jonatas, My plunker is upgrade ;-) – Geo-x Jun 1 '15 at 12:36

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.