This example shows how to use postcompose and vectorContext to animate features:
http://openlayers.org/en/latest/examples/feature-animation.html
I try to replace the style in these lines:
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
snapToPixel: false,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, ' + opacity + ')',
width: 0.25 + opacity
})
})
});
vectorContext.setStyle(style);
when I replace the style to an img style, like this:
var style = new ol.style.Style({
image: new ol.style.Icon(({
src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
}))
});
it's not working and throws an error: Cannot read property '0' of null
Is it a bug? Or how can I use img style about it?
If you want to add an image instead of a normal Point, you don't need to change the style into the animate function.
You can add the desired style into the vector layer this way:
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
image: new ol.style.Icon(({
src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
}))
})
});
I edited your jsfiddle without any style for the vectorContext. If you want to get some animation, like in the Openlayers Site example, you only have to add the old styling by uncommenting it in the jsfiddle code.
Related
I am using OpenLayers 3 and OpenStreetMap for my application.
I've managed to draw circle vectors on the map to draw markers, the problem I have is that the circles have always the same size when zooming in and out.
How can I change the size of the vectors according to the resolution ?
Here is my vector definition:
var dealerSource = new ol.source.Vector();
function dealerStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
anchor: [1.5, 1.5],
fill: new ol.style.Fill({
color: 'green'
})
})
});
return [style];
}
you can change the size of your circle depending on the zoom level ( if that's what you want to do )
var dealerSource = new ol.source.Vector();
function dealerStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: map.getView().getZoom(),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
anchor: [1.5, 1.5],
fill: new ol.style.Fill({
color: 'green'
})
})
});
return [style];
}
getZoom() returns the zoom level of your map as a number you can either use it or do a transformation on it to suit the desired size of your circle.
Note that above the bigger the zoom level is the bigger your circle will be drawn, to do the inverse you can replace the value by:
yourMaxZoomLevel - map.getView().getZoom()
you can also use getResolution() it returns a number too
I would like 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.
Here is code:
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: [10]
})
});
I want to get a result like this:
Here is my example, but it cannot show the image along with line. http://jsfiddle.net/Wenhua1224/jguxq4j0/
So, I use openlayers 3.9.0 and I have a vector layer that contains LineStrings, Polygons and Points.
By default LineStrings look like black lines, with litte stroke. I try to make them a bit thicker and their color have to be visible, so they not blend in, when many features are rendered.
This is my style
var stroke = new ol.style.Stroke({
color: 'rgba(0,0,0,0.4)',
lineCap: "butt",
lineJoin: "bevel",
width:1
});
function styleFunction(feature, resolution) {
var color = feature.get('color');
var name = feature.get('name');
var geom = feature.getGeometry().getType();
var fill = new ol.style.Fill({
color: color
});
//this does not work
if (geom == 'LineString') {
stroke.width=42;
}
var circle = new ol.style.Circle({
radius: 6,
fill: fill,
stroke: stroke,
color:color
});
var text= new ol.style.Text({
font: '20px Verdana',
text: name,
fill: new ol.style.Fill({
color: [64, 64, 64, 0.75]
})
})
var cStyle = new ol.style.Style({
fill: fill,
stroke: stroke,
image : circle,
text : text
});
return [cStyle];
}
I can not make this work. Any tips?
Thanks
OpenLayers 3 styles are immutable, they can not be changed.
Instead of trying to modify the width of the Stroke, create a new one with the options you want.
So in my Openlayers 3 I set a default style , that renders features the first time the layer loads
function styleFunction(feature, resolution) {
var color = feature.get('color');
var name = feature.get('name');
var fill = new ol.style.Fill({
color: color
});
var stroke = new ol.style.Stroke({
color: "black",
lineCap: "butt",
lineJoin: "bevel",
width:1
});
var text= new ol.style.Text({
font: '20px Verdana',
text: name,
fill: new ol.style.Fill({
color: [64, 64, 64, 0.5]
})
})
var cStyle = new ol.style.Style({
fill: fill,
stroke: stroke,
text: text
});
return [cStyle];
}
When a feature is clicked I want that feature to change its style and the rest to keep the default style above.
This is my attempt to do this
//add simple click interaction to the map
var select = new ol.interaction.Select();
map.addInteraction(select);
//for every clicked feature
select.on('select', function(e) {
var name = e.selected[0].get('name');
//set the clicked style
var fillClick= new ol.style.Fill({
color: "black"
});
var strokeClick = new ol.style.Stroke({
color: "white",
lineCap: "butt",
lineJoin: "bevel",
width:3
});
var textClick= new ol.style.Text({
font: '10px Verdana',
text: name,
fill: new ol.style.Fill({
color: [64, 64, 64, 1]
})
})
var styleClick = new ol.style.Style({
stroke: strokeClick,
fill : fillClick,
text : textClick
});
//set all to default
for (i in e.selected){
e.selected[i].setStyle(styleFunction);
}
//reset the first selected to the clicked style
e.selected[0].setStyle(styleClick);
I dont get any errors on the console, but this wont work. The clicked feature wont return to the default style when I click another one. All the clicked features keep the styleClick.
So, how do I fix this and also, is there a simpler way to do this? I think its a lot of code for this kind of functionality
Thanks
EDIT
I replaced
for (i in e.selected){
e.selected[i].setStyle(styleFunction);
}
with
var allfe = sourceVector.getFeatures();
for (i in allfe){
allfe[i].setStyle(styleFunction);
}
So now all the features will get the style defined in the styleFunction function.
This does not work. I get Uncaught TypeError: feature.get is not a function referring to the first line of the function, var color = feature.get('color'); this one.
I cannot just set a style, I need it to be a function so I can check the geomerty type in the future.
So my two problems,
I dont know how to debug and fix this error
If I have like 500 features, redrawing all of them for every click, will slow the rendering. Is there another solution to this?
Thanks
Layer and feature style functions are different
When using OpenLayers 3 style functions, you have to note the difference between an ol.FeatureStyleFunction and a ol.style.StyleFunction. They are very similar, since they both should return an array of ol.Styles based on a feature and a resolution. They are, however, not provided with that information in the same way.
When providing a style function to a feature, using it's setStyle method, the function should be an ol.FeatureStyleFunction. An ol.FeatureStyleFunction is called with this referencing the feature, and with the resolution as the only argument.
When providing a style function to a layer, it should be an ol.style.StyleFunction. They are called with two arguments, the feature and the resolution.
This is the cause of your error. You are using an ol.style.StyleFunction as a feature style. Later, when your style function is called, the first argument is the resolution and not the feature that you are expecting.
Solution 1: setStyle(null)
This solution has already been proposed in #jonatas-walker's answer. It works by setting a style on your selected features and removing the style from the unselected ones (instead of setting your style function to the unselected features).
OpenLayers will use the feature's style if it has one, and otherwise use the layer's style. So re-setting the unselected features' style to null will make them use the layer's style function again.
Solution 2: use the style option of your select interaction
ol.interaction.Select accepts a style option (an ol.style.StyleFunction), which is used to style the selected features.
Pros: Having one style function for the layer (normal view) and a style function for the select interaction makes the code more readable than mixing feature and layer styles. Also, you don't have to keep track of the events or modify the features.
It could be done similar to this:
var selectedStyleFunction = function(feature, resolution) {
return [new ol.style.Style({
stroke: new ol.style.Stroke({
color: "white",
lineCap: "butt",
lineJoin: "bevel",
width:3
}),
fill : new ol.style.Fill({
color: "black"
}),
text : new ol.style.Text({
font: '10px Verdana',
text: feature.get('name'),
fill: new ol.style.Fill({
color: [64, 64, 64, 1]
})
})
})];
};
var select = new ol.interaction.Select({
style: selectedStyleFunction
});
map.addInteraction(select);
UPDATE - fiddle styling with ol.interaction.Select
How about - http://jsfiddle.net/jonataswalker/zz6d4z7d/
var select = new ol.interaction.Select();
map.addInteraction(select);
var styleClick = function() {
// `this` is ol.Feature
return [
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [245, 121, 0, 0.8] }),
stroke: new ol.style.Stroke({ color: [0,0,0,1] }),
radius: 7
}),
text: new ol.style.Text({
font: '24px Verdana',
text: this.get('name'),
offsetY: 20,
fill: new ol.style.Fill({
color: [255, 255, 255, 0.8]
})
})
})
];
};
select.on('select', function(evt){
var selected = evt.selected;
var deselected = evt.deselected;
selected.forEach(function(feature){
feature.setStyle(styleClick);
});
deselected.forEach(function(feature){
feature.setStyle(null);
});
});
I've got a vector layer with a GeoJSON source, consisting of Points and a LineString. When I click on a point I want to open a popup with additional information.
Here's some code:
var style = {
'Point': [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgb(255,0,0)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1
}),
})
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 3
})
})],
'MultiLineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 3
})
})]
};
var map = new ol.Map({
target: 'map-ol-canvas',
interactions: ol.interaction.defaults({mouseWheelZoom: false}),
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
zoom: 8,
maxZoom: 16
})
});
map.getView().fit(extent, map.getSize());
var trackSource = new ol.source.Vector({
url: '/test.geojson',
format: new ol.format.GeoJSON()
});
var track = new ol.layer.Vector({
source: trackSource,
style: function(feature, resolution) {
return style[feature.getGeometry().getType()];
}
});
map.addLayer(track);
var select = new ol.interaction.Select({
filter: function (feature, layer) {
return feature.getGeometry().getType() === 'Point';
}
});
map.addInteraction(select);
// When user clicks on a waypoint, show a tooltip.
function onMouseClick(browserEvent) {
var coordinate = browserEvent.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
map.forEachFeatureAtPixel(pixel, function(feature) {
if (feature.getGeometry().getType() === 'Point') {
console.log(feature.get('date'));
}
});
}
map.on('click', onMouseClick);
The problem:
When I click directly on a point nothing happens. When I click a couple of pixels below and a bit right or left (depends on zoom level!), the point gets selected and the console.log is triggered.
I can fix this by using Firebox WebDeveloper Addon and activating "Disable all styles".
However, when I manually remove all CSS one by one that behavior never goes away.
In the first place I thought this might be some inherited padding or margin, but currently I think the canvas shouldn't be affected by any CSS at all.
Any ideas about what could be wrong?
I'm experiencing the same issue. It appears to be linked to navigating to the page from a specific modal (I'm using ajax hash paging). The footer doesn't load and after I interact with the first feature on the map the following happens;
The map jumps and stretches/smears slightly
The footer shows up on my page
The vertical scroll bar appears
The issue doesn't seem to occur when i link from another page.
I have the same problem.Here are some advices may help you:
check the the size of map's container(may be a Div).
check the size of map(openlayers's map object).
compare that two size to confirm whether the two size are equal.
if not, you can use the map.setSize([width,height])to adjust the map's size.