How to add a new shape on top by default - konvajs

I'm working on a KonvaJS application and it's like a Paint application including drawing functionality. But when I'm using the pencil tool I want to have the new shape on top.
When I'm adding a new shape to my layer, it always gets a index=0 by default:
layer.add(newShape);
stage.add(layer);
layer.draw();
Is there any way to add a new shape on top by default? Something like moveToTop() function does.

Related

iOS Core Plot X Axis text + icon

Hope you people doing great.I am new to Core Plot api and need your suggestion.I want to customize x index of plot and wants to add icon and label to each index.As I have searched , I got to make policy none to index but I want to add image to each label.Help will be much appreciated.
Custom axis labels don't have to be just text. The label's contentLayer can be any CPTLayer. Depending on what you're trying to achieve, you could render your text and label into an image and use that as the fill for a CPTBorderedLayer, add the icon (in a bordered layer) as a sublayer to the text layer for the label, or even create a custom CPTLayer subclass that draws everything the way you want it.

Modify interaction - How to get the segment which has been hovered

I am using openlayers-3 modify interaction to edit vector layers. When a polygon/polyline is being edited, if mouse is close to a line segment, a small circle is drawn and dragging it creates a new vertex or moves an existing vertex, depending on where on the segment I was hovering.
Now, sometimes this is very difficult to understand if I am hovering on an existing vertex, or on middle of a segment. I have thought about two solutions to the problem:
Highlight the segment I am hovering with a different style so that I
can see its edges.
When hovering on an vertex, style the small
circle with a different style.
Is there a way to achieve any of the two?
It can be done changing the interaction condition like:
var selectPointerMove_Highlight = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
map.addInteraction(selectPointerMove_Highlight);
I have an online example.

Openlayers 3 custom polygon symbolizer

Is it possible to make the symbolizer of a feature be a polygon?
Openlayers 3 has a ol.style.Circle and ol.style.RegularShape symbolizers for example. Is there something equivalent to a hypothetical ol.style.Polygon? Whereby you could make a dynamic symbolizer from multiple points?
The reason I want to do this is because I have markers on my map that are dynamically shaped depending on the data for that marker. It is possible to simply draw a ol.geom.Polygon at each point, but then they are not zoom independent. I want to have markers that are zoom independent, meaning that their size on the screen does not change when I zoom in or out.
And just to be clear, using raster images (for example in ol.style.Icon) is not possible. There are way too many markers in way too many shapes and colours in my project.
Yes, this is possible. ol.style.Style takes a geometry argument that you can use to overwrite the geometry that is used to render a feature.
var style = function(feature, resolution) {
// construct the polygon taking the resolution into account
var polygon = new ol.geom.Polygon(...);
return [
new ol.style.Style({
geometry: polygon,
stroke: ...
fill: ...
}),
];
};
Also see this question: Drawing a Speed Leader line in OpenLayers

Make one layer to not rotate with map

I have layer with pictures, I want them to stay as they are and don't rotate with map when I call map.getView().setRotation(x) . There is option to disable rotation for map, but is it possible to disable rotation for one layer?
If your "layer with pictures" is a vector layer with icon images, the icons won't rotate by default. You can control rotation of icons by configuring the icon style with the rotateWithView option. The default is false. Make sure you don't have a style like this:
new ol.style.Style({
image: new ol.style.Icon({
src: 'data/image.png',
rotateWithView: true
})
});
If you do, just remove the rotateWithView: true line.
If your layer is a WMS layer, and your images are point styles, you may be lucky to have a WMS server that supports rotation. Then you can add a vendor option (ANGLE for GeoServer and MapServer) and update that whenever the view rotation changes:
map.getView().on('change:rotation', function() {
wmsLayer.getSource().updateParams({
ANGLE: map.getView().getRotation() / Math.PI * 180
});
The above snippet assumes that map is your ol.Map instance and wmsLayer is your ol.layer.Image instance with an ol.source.ImageWMS.
As far as I know, you can't disable rotation for one layer. As suggests the answer from #ahocevar the best practice should be to display your "pictures" in a separate vector layer and use the rotateWithView options in the style definition of this layer.

Change OpenLayers3 vector to edit via button

I have two vector polygons layers (ol3.2) and want users to switch between drawing and interacting with them via a button. I’d like the select and modify methods to work only for the active polygon layer. The documentation implies that the 'layers' option can be used to limit which layers can be selected, but I am not quite clear of the syntax. With task.myvector1 as the name of an ol.layer.Vector, I currently have:
select = new ol.interaction.Select({
layers: [ task.myvector1 ]
});
modify = new ol.interaction.Modify({
features: select.getFeatures()
});
But that does not successfully allow a selection, whereas when the option is removed select-and-modify works well, albeit for all layers.
Assuming this is just a syntax glitch, is there then a way to update the layers option in 'select', after a button click event, to switch the selectable layer to, for example, task.myvector2?

Resources