I have a set of points on a vector layer and I am allowing the user to draw a polygon on another layer of the map. I want to select all the points inside the polygon.
I have got this to work, but only temporarily. When the user finished the polygon, the points are selected but then immediately unselected again. I cannot figure out why.
I have made the function by referencing two examples: measure and DragBox
When I replace my polygon with a dragbox, the selections persist. But when I use interaction.Draw to make a polygon, the selection does not persist.
Here is my code. Any help is appreciated!
var map;//Add map layervar baseLayer = new ol.layer.Tile({ source : new ol.source.OSM()});//Add viewvar view = new ol.View({ //projection is about how we represent a global thing on a flat thing. projection : 'EPSG:900913', center : ol.proj.fromLonLat([-2.5,51.1]), zoom:4,});//Add layer of point featuresvar pointsLayer = new ol.layer.Vector({ title: 'random points', source : new ol.source.Vector({ url : './assets/Points.json', format : new ol.format.GeoJSON() })});//initialise map (called at the end)function init(){ map = new ol.Map({ target : 'map', //the type of rendered we want to use. renderer : 'canvas', view : view }); map.addLayer(baseLayer); map.addLayer(pointsLayer);}init();//////////// ADD SELECTION//add ol.collection to hold all selected featuresvar select = new ol.interaction.Select();map.addInteraction(select);var selectedFeatures = select.getFeatures();//////////// ADD DRAWING// Add drawing vector sourcevar drawingSource = new ol.source.Vector();//Add drawing layervar drawingLayer = new ol.layer.Vector({ source: drawingSource});map.addLayer(drawingLayer);//declare interactions globally so we can attach listeners to them later.var draw;var modify;// Drawing interactiondraw = new ol.interaction.Draw({ source : drawingSource, type : 'Polygon', //only draw when Ctrl is pressed. condition : ol.events.condition.platformModifierKeyOnly});map.addInteraction(draw);draw.on('drawend', function(e) { // features that intersect the box are added to the collection of // selected features, and their names are displayed in the "info" // div var extent = e.feature.getGeometry().getExtent(); pointsLayer.getSource().forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); });});//////////// SUPPORTING FUNCTIONS//turn the cursor into a pointer if it's over an image.map.on('pointermove',function(evt){ if(evt.dragging){ return; } var pixel = map.getEventPixel(evt.originalEvent); //called with pixel, callback. Detects layers that have a colour value //at a pixel. var hit = map.forEachFeatureAtPixel(pixel,function(feature){ return true; }); map.getTargetElement().style.cursor = hit? 'pointer' : '';});
أكثر...
I have got this to work, but only temporarily. When the user finished the polygon, the points are selected but then immediately unselected again. I cannot figure out why.
I have made the function by referencing two examples: measure and DragBox
When I replace my polygon with a dragbox, the selections persist. But when I use interaction.Draw to make a polygon, the selection does not persist.
Here is my code. Any help is appreciated!
var map;//Add map layervar baseLayer = new ol.layer.Tile({ source : new ol.source.OSM()});//Add viewvar view = new ol.View({ //projection is about how we represent a global thing on a flat thing. projection : 'EPSG:900913', center : ol.proj.fromLonLat([-2.5,51.1]), zoom:4,});//Add layer of point featuresvar pointsLayer = new ol.layer.Vector({ title: 'random points', source : new ol.source.Vector({ url : './assets/Points.json', format : new ol.format.GeoJSON() })});//initialise map (called at the end)function init(){ map = new ol.Map({ target : 'map', //the type of rendered we want to use. renderer : 'canvas', view : view }); map.addLayer(baseLayer); map.addLayer(pointsLayer);}init();//////////// ADD SELECTION//add ol.collection to hold all selected featuresvar select = new ol.interaction.Select();map.addInteraction(select);var selectedFeatures = select.getFeatures();//////////// ADD DRAWING// Add drawing vector sourcevar drawingSource = new ol.source.Vector();//Add drawing layervar drawingLayer = new ol.layer.Vector({ source: drawingSource});map.addLayer(drawingLayer);//declare interactions globally so we can attach listeners to them later.var draw;var modify;// Drawing interactiondraw = new ol.interaction.Draw({ source : drawingSource, type : 'Polygon', //only draw when Ctrl is pressed. condition : ol.events.condition.platformModifierKeyOnly});map.addInteraction(draw);draw.on('drawend', function(e) { // features that intersect the box are added to the collection of // selected features, and their names are displayed in the "info" // div var extent = e.feature.getGeometry().getExtent(); pointsLayer.getSource().forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); });});//////////// SUPPORTING FUNCTIONS//turn the cursor into a pointer if it's over an image.map.on('pointermove',function(evt){ if(evt.dragging){ return; } var pixel = map.getEventPixel(evt.originalEvent); //called with pixel, callback. Detects layers that have a colour value //at a pixel. var hit = map.forEachFeatureAtPixel(pixel,function(feature){ return true; }); map.getTargetElement().style.cursor = hit? 'pointer' : '';});
أكثر...