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ê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.