I'd like to have features in a vector source layer that each have an icon, text, AND a line. I can get the icon and text to display but I can't get a line to draw. Using a different geometry I can get a line with a label to draw but no icon.
Is this possible without creating another feature? What geometry should I use for the feature?
Here's the code I'm using to draw an icon with text:
feature.setGeometry(new ol.geom.Point(
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')
));
feature.setStyle([
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1.0,
scale: 0.75,
src: 'res/ship_a_flash.png',
rotation: 30.0
})
}),
new ol.style.Style({
text: new ol.style.Text({
text: feature.text,
font: 'bold 20px Times New Roman',
offsetY: -25,
fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
stroke: new ol.style.Stroke({color: 'rgb(255,255,255)', width: 1})
})
})
]);
So now I want to add a single line from the first point. I realize I need to add another point to the geometry so I tried MultiPoint and LineString like below.
feature.setGeometry(new ol.geom.MultiPoint([
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([lon+1, lat+1], 'EPSG:4326', 'EPSG:3857')]
));
feature.setStyle([
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1.0,
scale: 0.75,
src: 'res/ship_a_flash.png',
rotation: 30.0
})
}),
new ol.style.Style({
text: new ol.style.Text({
text: feature.text,
font: 'bold 20px Times New Roman',
offsetY: -25,
fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
stroke: new ol.style.Stroke({color: 'rgb(255,255,255)', width: 1})
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(0,0,0)',
width: 2,
})
})
]);
I was hoping that the first point would be used for the Icon and Text and the 2 points would be used for the Stroke. With MultiPoint, the feature (icon and text) are drawn twice - once at each point in the geometry. With LineString, a line and text is drawn between the 2 points but the icon is not drawn.
It seems like I can either have an icon or a line in the feature, not both.
You could do the following: Use a geometry collection which contains a point and a line. Then use a StyleFunction which gets the point and the line and returns two separate styles for them:
var iconFeature = new ol.Feature({
geometry: new ol.geom.GeometryCollection([
new ol.geom.Point([0, 0]),
new ol.geom.LineString([[0,0], [1E6, 1.5E6]])
]),
...
});
var styleFunction = function(feature, resolution) {
var geometries = feature.getGeometry().getGeometries();
var point = geometries[0];
var line = geometries[1];
var iconStyle = new ol.style.Style({
geometry: point,
image: ...,
text: ...
});
var lineStyle = new ol.style.Style({
geometry: line,
stroke: ...
});
return [iconStyle, lineStyle];
};
http://jsfiddle.net/p8tzv9ms/11/
Related
Is there a way to avoid cropped point styles when rendering in ol.layer.VectorTile Layer using OpenLayers 3 (v3.18.2)?
Here is the relevant code of the example:
layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
url: 'http://localhost:8181/schools/{z}/{x}/{y}.pbf',
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
tilePixelRatio: 16
}),
style: function(feature) {
return new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(105, 105, 105, 1.0)'
}),
stroke: new ol.style.Stroke({
width: 1,
color: 'rgba(105, 105, 105, 0.3)'
}),
radius: 7
}),
text: new ol.style.Text({
color: '#FFFFFF',
fontFamily: 'Calibri,sans-serif',
fontSize: 12,
text: feature.get("count").toString(),
labelYOffset: -12
})
});
}
});
map.addLayer(layer);
You have to generate your vector tiles differently, i.e. with a buffer, so your tiles also include nearby points from neighbouring tiles.
I am doing an internship now and this is my first time to touch OL3.
I try to make a demo to draw and change text with markers.
But I find that I can only change all text of the marker instead of changing the selected one.
Here is a simple jsfiddle I made.
features: select.getFeatures()
This is not work for me I think.
So how can I do that?
You may change you style variable to a ol.FeatureStyleFunction() to get the label from a property stored at the feature.
var style = function () {
return [
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: '//openlayers.org/en/v3.8.2/examples/data/icon.png'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
stroke: new ol.style.Stroke({
color: '#fff', width: 2
}),
// get the text from the feature (`this` is the feature)
text: this.get('text')
})
})
];
};
And to update text, update this property:
var features = select.getFeatures();
features.forEach(function(feature){
feature.set('text', nameElement);
});
http://jsfiddle.net/jonataswalker/b44nxco8/
I am adding features to a map by reading their WKT-String:
var feature = wkt.readFeature(entity.WellKnownText);
feature.bxObject = entity;
src.addFeature(feature);
Each feature has a bxObject-Property, and this Property contains the "radius"-Property.
I style the layer, to which the features are added like so:
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
})
})
});
I want the radius-Property of the style to be dynamic. What I did and works as a workaround is the following:
var layer = new ol.layer.Vector({
source: src,
style: function (feature, resolution) {
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: feature.bxObject.radius || 6,
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
})
})
];
}
});
But this creates a new style for each feature... I potentially draw 100s of features and I even have the subjective opinion, that it slows everything down. Is this really the way it is done?
I found this stackoverflow post. But I had no luck trying to interpolate with "${...}". I guess this is an openLayers 2 feature:
var layer = new ol.layer.Vector({
source: src,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: "${bxObject.radius}",
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({ color: [0, 0, 255, 0.1] })
})
})
});
Yes this is really the way, but you should keep a style cache and re-use when possible. See for instance: http://openlayers.org/en/v3.10.1/examples/kml-earthquakes.html
I am using OpenLayers 3 and have more or less implemented everything in my requirements list, except one thing: I am asked to somehow make the polygon rendering indicate the polygon vertices with small circles.
In plain words, the desired polygon outline is not just a line - it is a line "adorned" with small circles in all the places where there is a vertex.
How can I do that in OL3? I searched in the ol.style.Style docs (that is, the style I pass via setStyle to the ol.layer.Vector containing my polygons), but didn't find anything relevant.
For reference, there is now an example showing how to display the vertices of a polygon with a custom style geometry:
http://openlayers.org/en/master/examples/polygon-styles.html
var styles = [
// style for the polygon
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
// style for the vertices
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function(feature) {
// return the coordinates of the first ring of the polygon
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})
];
The kind OL3 devs have provided the answer on the GitHub issue list. You basically use a style's geometry function, that transforms the geometry before projecting it - and in that function, you add your vertices to a MultiPoint geometry. #tsauerwein went as far as creating a working fiddle - many thanks to him for his work.
var styleFunction = function() {
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'orange', width: 2})
});
return [
new ol.style.Style({
image: image,
geometry: function(feature) {
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
];
};
I cannot get Stroke opacity working in OpenLayers 3 no matter what I try. What I try to achieve is to draw a line to OSM tile map with 0.5 opacity.
Here is sample code:
var lineString = new ol.geom.LineString([
[4.9020, 52.3667],
[4.9030, 52.3667],
[4.9040, 52.3667],
[4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: lineString,
name: 'Line'
})]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
opacity: 0.5,
width: 15
})
})
});
var view = new ol.View({
center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
zoom: 18
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
lineLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
You can see it here:
http://jsfiddle.net/abgcvqw3/1/
The opacity is set through the color option, as the fourth element of the color value (the A, for "Alpha" in RGBA).
For example here's how you can have a semi transparent yellow:
color: [255, 255, 0, 0.5]
And here is another notation:
color: 'rgba(255,255,0,0.5)'