我正在创建一个Openlayers3地图。与给出的示例不同,我必须在知道功能之前为每个图层创建样式。我使用以下序列:
示例:
paypal.Button.render
示例:
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'
}))
})
})
//这是将文本添加到样式
的新功能 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;
}
//结束
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'): ''
})
})
];
}
如何为每个功能添加标签名称?