I am creating an Openlayers3 map. Unlike the examples given, I have to create the styles for each layer before I know what the features are. I am using the following sequence:
- Initialise the map.
- Set up the styles for each group/ol.layer.vector
Example:
this.addGroup('testPackages', {
normalStyle: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#c407d3', width: 3, lineDash: [.1, 5] }),
fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.1)' })
}),
hoverStyle: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#c407d3', width: 3, lineDash: [.1, 5] }),
fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.4)' })
}),
selectedStyle: new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#c407d3', width: 3 }),
fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.4)' })
})
});
this.addGroup('cabinets', {
normalStyle: new ol.style.Style({
image: new ol.style.Icon(({
scale: 0.25,
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: '/images/olMaps/house.png'
}))
}),
hoverStyle: new ol.style.Style({
image: new ol.style.Icon(({
scale: 0.25,
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: '/images/olMaps/house.png'
}))
}),
selectedStyle: new ol.style.Style({
image: new ol.style.Icon(({
scale: 0.25,
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: '/images/olMaps/house.png'
}))
})
})
- Draw the features on the map.
Example:
drawLine(geoShape: any, assetId: string, group: IAssetGroup) { // vectorLine: ol.source.Vector, style?: ol.style.Style) {
// Transform the geometry for a map line-string.
const transformedGeometry = this.transformCoordinates(geoShape);
const lineString = new ol.geom.LineString(<any>transformedGeometry);
// Create the line-string feature.
const feature = new ol.Feature({
geometry: lineString,
id: assetId,
group: group
});
// Set the style on the feature?
if (!!group.normalStyle)
feature.setStyle(group.normalStyle);
// new lines
var myStyle = group.normalStyle;
myStyle = this.styleFunction(myStyle, feature);
feature.setStyle(myStyle);
// end
// Add the feature to the vector-set.
group.vector.addFeature(feature);
// Add to list of all features.
this.allFeatures.push(feature);
this.lookupFeatures[assetId] = feature;
}
// this is the new function that adds the text to the style
styleFunction(myStyle: ol.style.Style, feature: ol.Feature) {
return [
new ol.style.Style({
fill: myStyle.getFill(),
stroke: myStyle.getStroke(),
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 ol.Feature
// and show only under certain resolution
text: this.olMap.getView().getZoom() > 12 ? feature.get('name'): ''
})
})
];
}
// end
drawMarker(geoLocation: [number, number], assetId: string, type: string, group: IAssetGroup) {
// Transform the geometry for a map point.
const coordinates = this.transformCoordinates(geoLocation);
const pointGeometry = new ol.geom.Point(<any>coordinates);
// Create the point feature.
const feature = new ol.Feature({
geometry: pointGeometry,
id: assetId,
group: group
});
// Set the style on the feature?
if (!!group.normalStyle)
feature.setStyle(group.normalStyle);
// Add the feature to the vector-set.
group.vector.addFeature(feature);
// Add to list of all features.
this.allFeatures.push(feature);
this.lookupFeatures[assetId] = feature;
}
How do I then add the label name for each feature?
