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.

0

1 Answer 1

2

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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