Is there a way to create a new layer from a DragBox selection?
Here is my DragBox interaction:
/* create drag box */
this.dragBox = new ol.interaction.DragBox({
/* dragbox interaction is active only if alt key is pressed */
condition: ol.events.condition.altKeyOnly,
/* style the box */
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: [0, 0, 255, 1]
})
})
});
/* add the DragBox interaction to the map */
this.map.addInteraction(this.dragBox);
On the boxend event I want to create a new layer using the data in my bounding box. How can I do this ?
I think this is fairly straightforward approach.
You can get your boundary (in openlayer's term is called 'extent') like this:
var extent = this.dragBox.getGeometry().getExtent(); // you can use this inside the boxend event
With this boundary, you can filter the map with whatever method you want. For example using openlayers geometry intersect, to check which feature in the layer that intersects the extent:
var isIntersect=feature.getGeometry().intersectsExtent(extent);
Then create a layer and populate it with the features you filtered.
Related
What I am trying to achieve is showing the transformer around the custom shape itself. I took the code directly from the API docs for creating the custom shape and adding the transformer. The transformer works great for rectangles, circles, etc but for custom shapes, it doesn't seem to appear properly.
Here is a link to a demo app with the issue with custom shapes and transformer:
https://jsfiddle.net/5zpua740/
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
sceneFunc: function (context) {
context.beginPath();
context.moveTo(120, 150);
context.lineTo(320, 180);
context.quadraticCurveTo(250, 200, 360, 270);
context.closePath();
// Konva specific method
context.fillStrokeShape(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// add the triangle shape to the layer
layer.add(triangle);
// add the layer to the stage
stage.add(layer);
stage.on('click', function (e) {
// if click on empty area - remove all transformers
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
})
In this sample, you can see that if you click on the object, the transformer appears in the corner. You can still use it to manipulate the object but it's not around the object itself.
Any help appreciated! Thanks in advance.
Konva can't detect bounding box of a custom shape. But we can simply help it. We just need to define a method getSelfRect.
The method should return bounding box of a shape without transforming applied (like the shape has no rotation, no scaling and placed in x =0, y=0).
We can do this by just looking at sceneFunc:
triangle.getSelfRect = function() {
return {
// sceneFunc started from moving to 120, 150 point
// so it is our top left point
x: 120,
y: 150,
// the bottom right point finished with quadraticCurveTo
// I will use the coordinates to calculate size of the shape
width: 360 - 120,
height: 270 - 150
};
}
Demo: http://jsbin.com/lazuhowezi/2/edit?js,output
Is it possible to get the applied style for a selected feature? My layer uses a style function instead of an ol.style.Style. When I call myFeature.getStyle() it returns the function.
Updating my question with some things that I have tried so far based on responses here and elsewhere.
I ended up creating a select style function for each layer.
This doesn't work, no style is returned:
selectInteraction = new ol.interaction.Select( {
style: function( feature, resolution ) {
if ( feature.selectStyle ) {
return feature.selectStyle;
}
},
layers: mylayers
} );
Also, with the above I get the following error:
Uncaught TypeError: style.getImage is not a function
ol.renderer.vector.renderFeature #ol.js:38455
ol.renderer.canvas.VectorLayer.renderFeature #ol.js:44202
renderFeature #ol.js:44148
ol.renderer.canvas.VectorLayer.prepareFrame #ol.js:44164
ol.renderer.canvas.Map.renderFrame #ol.js:45268
ol.Map.renderFrame_ #ol.js:52034
(anonymous function) #ol.js:50898
This does work, the feature is rendered using my select style. However, I don't want to have to manage re-setting styles, so it really needs to be implemented in the selectInteraction:
evt.selected.forEach( function( evt ) {
evt.setStyle( evt.selectStyle );
}, this );
My workaround was to create the style separately from the feature and then use setStyle() to apply it. I also saved the style elsewhere in the feature so it could be retrieved later.
let myStyle = new ol.style.Style({
image: new ol.style.RegularShape({
fill: new ol.style.Fill({
color: 'cyan'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
points: 4,
radius: 9,
angle: Math.PI / 4
}),
});
myFeature.setStyle(myStyle);
myFeature.set('myStyle', myStyle); // save it for later use
During the 'select' process simply use:
feature.get('myStyle');
to retrieve the style that was applied to the feature.
You should call the function with the feature (and optionally the resolution if your style function depends on it). So something like: myFeature.getStyle().call(this, feature); or myFeature.getStyle().call(this, feature, resolution);
I think you must use myFeature.getStyleFunction() instead of myFeature.getStyle().
Good Luck.
I would like you use select interaction to add a feature, but the e.coordinate shows undefined.
var select = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0288D1',
width: 2
})
})
});
map.addInteraction(select);
select.on('select', function(e) {
var feat = new ol.Feature({
geometry: new ol.geom.Point(e.coordinate),
style: style1
});
alert(e.coordinate);
feat.setStyle(style1);
layerVector.getSource().addFeature(feat);
});
If someone know the reason, tell me how to get the coordinate when i click on viewer with this select interaction.
UPDATE
What you ask in comments (about listeners) can be easier if you become a friend of API Docs. In my beginning it was very hard to know them all, but the docs are much, much better so let it be your source.
Each part of OpenLayers has its own listeners, so, for instance, click at ol.Map, scroll to the "Fires:" section and you'll see the several listeners, the same with ol.View and so forth.
To get clicked coordinate inside ol.interaction.Select listener use:
select.on('select', function(evt){
var coord = evt.mapBrowserEvent.coordinate;
console.info(coord);
// ...
});
Default labeling in OpenLayers 3.10.1 labels each part of a MultiPolygon. I want to know if it is possible to label only the first polygon in the MultiPolygon.
You can use a separate style for the label with a geometry function, which returns a single point for the label position.
var styles = [
// Style for the label
new ol.style.Style({
text: new ol.style.Text({..}),
geometry: function(feature) {
// expecting a MultiPolygon here
var interiorPoints = feature.getGeometry().getInteriorPoints();
return interiorPoints.getPoint(0);
}
}),
// Style for the polygons
new ol.style.Style({
stroke: new ol.style.Stroke({...}),
fill: new ol.style.Fill({...})
})
];
http://jsfiddle.net/p0acpbtg/2/
I've read through the source, and looked at the examples but haven't found the answer yet.
I need to style the image that appears on the modify overlay beneath the mouse cursor.
i'm using a custom style function to add midpoints and custom endpoints to the layer used by ol.interaction.Modify. ol.interaction.Modify is applying styling to a point near the mouse cursor to indicate that the feature can be modified. This is great except the cursor styling falls beneath the custom endpoints. i can't find a way to alter the z-index.
so, i'm answering my question for myself. i guess that's what makes the internet wonderful. i'm not a dog.
// we'd normally pass feature & resolution parameters to the function, but we're going to
// make this dynamic, so we'll return a style function for later use which will take those params.
DynamicStyleFunction = ( function( /* no feat/res yet!*/ ) {
/**
you really only get style are rendered upon simple geometries, not features. features are made of different geometry types, and styleFunctions are passed a feature that has its geometries rendered. in terms of styling vector geometries, you have only a few options. side note: if there's some feature you expect to see on the the map and it's not showing up, you probably haven't properly styled it. Or, maybe it hasn't been put it in a collection that is included in the source layer... which is a hiccup for a different day.
*/
// for any geometry that you want to be rendered, you'll want a style.
var styles = {};
var s = styles;
/**
an ol.layer.Vector or FeatureOverlay, renders those features in its source by applying Styles made of Strokes, Fills, and Images (made of strokes and fills) on top of the simple geometries which make up the features
Stroke styles get applied to ol.geom.GeometryType.LINE_STRING
MULTI_LINE_STRING can get different styling if you want
*/
var strokeLinesWhite = new ol.style.Stroke({
color: [255, 255, 255, 1], // white
width: 5,
})
var whiteLineStyle new ol.style.Style({
stroke: strokeLinesWhite
})
styles[ol.geom.GeometryType.LINE_STRING] = whiteLineStyle
/**
Polygon styles get applied to ol.geom.GeometryType.POLYGON
Polygons are gonna get filled. They also have Lines... so they can take stroke
*/
var fillPolygonBlue = new ol.style.Style({
fill: new ol.style.Fill({
color: [0, 153, 255, 1], // blue
})
})
var whiteOutlinedBluePolygon = new ol.style.Style({
stroke: strokeLinesWhite,
fill: fillPolygonBlue,
})
styles[ol.geom.GeometryType.POLYGON] = fillPolygonBlue
/**
Circle styles get applied to ol.geom.GeometryType.POINT
They're made with a radius and a fill, and the edge gets stroked...
*/
var smallRedCircleStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#FF0000', // red... but i had to look it up
})
})
})
var whiteBigCircleWithBlueBorderStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#FFFFFF' // i guessed it
})
}),
stroke: new.ol.style.Stroke({
color: '#0000FF', // blue
width: 5
})
})
// render all points as small red circles
styles[ol.geom.GeometryType.POINT] = smallRedCircleStyle
// if you pass an array as the style argument, every rendering of the feature will apply every defined style style rendered with the geometry as the argument. that can be a whole lot of rendering in a FeatureOverlay...
smallRedCircleStyle.setZIndex(Infinity)
whiteBigCircleWithBlueBorderStyle.setZIndex(Infinity -1) // that prob wouldn't work, but i hope it's instructive that you can tinker with styles
// so...
var bullseyePointStyle = [ smallRedCircleStyle, whiteBigCircleWithBlueBorderStyle ];
return function dynamicStyleFunction (feature, resolution){
// this is the actual function getting invoked on each function call
// do whatever you want with the feature/resolution.
if (Array.indexOf(feature.getKeys('thisIsOurBullseyeNode') > -1) {
return bullseyePointStyle
} else if (feature.getGeometryName('whiteBlueBox')){
return whiteOutlinedBluePolygon
} else {
return styles[feature.getGeometryName()]
}
}
})()
ol.interaction.Modify, ol.interaction.Select and ol.interaction.Draw take a style argument to change the look of the sketching features.