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.
Related
I have a png image of other map that I know the original bounding box and the original projection. This image is 400x400 large but I have control over its width and height and can generate any size I want.
How can I position this image over my OL map in the correct location?
Both have same SRID.
Sorry guys. I need to learn to search a little more before ask.
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://localhost:8080/mclm/img/export.png',
projection: 'EPSG:4326',
imageExtent: [-44,-23,-42,-21]
})
});
I have a highcharts scatter plot with jpg's for marker symbols. When the chart loads, I would like to gently scale up and then scale down the image sizes for a few seconds so that the consumer knows that you can interact with the chart. The marker symbols are added as svg image tags by highcharts and so working with css transform/transitions are not working. I also tried adding in an animateTransform svg attribute to the image tag, but that is disrupting the way the marker symbol is placed on the chart. At the moment, I am at a loss as to what would be the best way to add a small scaling animation for a few seconds. I am currently looking into exporting my jpg's as svg paths so that they are easier to manipulate, but I don't know if that will work yet.
As an example, I would want the sun markers in this JS fiddle to scale up and then down a few times when the chart first loads. http://tinyurl.com/qj7eszh
It is possible to update series to change height and width of series' marker in callback based on series of setTimeouts.
Example: http://jsfiddle.net/9tcjo4dv/
}, function(chart){
var sunSeries = chart.get('sunSeries');
setTimeout(function(){
sunSeries.update({marker:{height: 15, width: 15}});
}, 500);
setTimeout(function(){
sunSeries.update({marker:{height: 30, width: 30}});
}, 1000);
});
I am wondering how to place images on a line. For example, instead of a dotted or dashed line, I could include a symbol of a ship or a character (e.g. |) repeated along the line.
My current code:
line = new ol.geom.LineString([[0, 0], [100, 100]]);
lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 5,
lineDash: [10, 10]
}),
});
lineFeature = new ol.Feature({
geometry: line,
});
lineFeature.setStyle(lineStyle);
. . .
map = new ol.Map({
layers: [
new ol.layer.Vector({
source: new ol.source.Vector({
features: [
lineFeature,
],
}),
})
],
. . .
EDIT 2:
Here is what my line looks like:
(See image)
Here is what it should look like:
(See image)
It could be like this, or pictures of anchors.
EDIT:
New style code (not working):
lineStyle = new ol.style.Style({
radius: 10,
images: './icon.png',
stroke: new ol.style.Stroke({
color: 'black',
width: 5,
lineDash: lineDash,
}),
});
Am I doing anything wrong?
EDIT 3:
I have figured out how to do this:
Using Blender, add a mesh and add vertices on where the vertices are on your line.
Convert the mesh to a curve (Alt-C).
Add a plane and add your image to it as a texture.
Scale the plane to the appropriate size relative to the line (S).
Add an Array modifier to the plane with the image and choose Fit Curve for Fit Type.
Set the Curve: to the name of the curve you created from the mesh.
Set the Relative Offset’s first box to the space between the dots (relative to the size of the dots)
Add a Curve modifier to the plane and choose the curve you created as the Object:.
Note: This may result in the images being deformed. If this occurs, follow these steps:
Duplicate the plane (Alt-D)
Remove the Array and Curve modifiers from the duplicate.
Parent the duplicate plane to the original plane.
Select the duplicate plane, then the original plane.
Press Ctrl-P.
Select Object.
In the original plane, go to the Object buttons (orange cube) and select Faces under Duplication.
This will place a copy of the plane at the center of each face.
There is currently no support for this in OpenLayers 3, I am also trying to find a mechanism that would work well and scale with many features. The only thing currently available in OpenLayers 3 to acheive this would be to use this technique, but it would greatly affect performance: http://boundlessgeo.com/2015/04/geometry-based-styling-openlayers-3/
A live example is available here:
http://openlayers.org/en/master/examples/line-arrows.html
To acheive the kind of style you want, you would have to compute points along the line for the given resolution and assign a ol.style.Icon for those points.
I guess it could be possible to implement more advanced stroke styles in OpenLayers 3, the following page demonstrates multiple techniques to render strokes with Canvas: http://perfectionkills.com/exploring-canvas-drawing-techniques/
lineStyle = new ol.style.Style({
image: new ol.style.Icon(({
opacity: 1,
size:20,
src: './icon.png'
})),
stroke: new ol.style.Stroke({
color: 'black',
width: 5,
lineDash: lineDash,
})
});
Visit these links to find more about this.
http://openlayers.org/en/v3.8.1/apidoc/ol.style.Style.html
http://openlayers.org/en/v3.6.0/apidoc/ol.style.Icon.html
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 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.