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.
Related
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.
I have a feature with an Image, it shows well on the map.
var style = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
src: imagesource,
})),
});
But when I add a select control on the layer
var selectcontrol = new ol.interaction.Select({
});
Only part of the image is clickable if the image is larger. Is there any settings to set here so that the whole image is clickable.
Here is a fiddle for the issue, you can see the cursor changes as you move to the center of the image, but the feature is not detected at the corners of the image
http://jsfiddle.net/c88keve7/2/
You can set the renderBuffer property when creating your vector layer. See ol.layer.Vector:
renderBuffer: The buffer around the viewport extent used by the renderer when getting features from the vector source for the rendering or hit-detection. Recommended value: the size of the largest symbol, line width or label. Default is 100 pixels.
I want to create a slope like in attached image in Box2D Cocos2d JS.
However, I am unable to create it properly when attached sprites to it.
My code is:
new b2Vec2(0, 0),
new b2Vec2(100 / worldScale, -50 / worldScale),
new b2Vec2(200 / worldScale, 0 / worldScale)
The image dimensions is 200 * 50, and worldScale = 30.
First of all I see you're using negative coordinates (-50). Everything in Cocos2d-JS (the default viewport) is positive ({0,0} is bottom left point).
To debug slope positioning I suggest you to use Box2d DebugDraw first, to see the actual slope you've described and then to place your sprite based on those wireframes.
Cocos2d-JS will clear it's own canvas in the update function, so you'll need to put another debug canvas on top of it, for DebugDraw.
This example helped me to add debug draw to my box2d sandbox successfully
add this code to update function
var debugDraw = new Box2D.Dynamics.b2DebugDraw();
debugDraw.SetSprite(document.getElementById("test").getContext("2d"));
// test is the id of another canvas which debugdraw works on
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit |
Box2D.Dynamics.b2DebugDraw.e_jointBit);
this.world.SetDebugDraw(debugDraw); this.world.DrawDebugData();
box2d use a different coordinate frame than cocos, so you need to do
transform 180 degrees. add this to the style of debug canvas
-webkit-transform:rotate(180deg); //and some other browsers' style
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
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?