我试图在我的openlayer3应用程序中显示来自geoserver的wfs gml图层的属性作为标签。我成功将标签作为文本但无法访问特定属性“名称”。鉴于我正在使用的代码。
var sourceWFS = new ol.source.Vector({
loader: function (extent) {
$.ajax('..../geoserver/harry/ows?', {
type: 'GET',
data: {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typename: 'ABC',
srsname: 'EPSG:3857',
geometryField:'geometry',
bbox: extent.join(',') + ',EPSG:3857'
}
}).done(function (response) {
sourceWFS.addFeatures(formatWFS.readFeatures(response));
});
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ()),
strategy: ol.loadingstrategy.bbox,
projection: 'EPSG:3857',
});
var layerWFS = new ol.layer.Vector({
source: sourceWFS
});
var interaction;
var interactionSelectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
var interactionSelect = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
}),
text: new ol.style.Text({
text:("abcd")
})
})
});
var interactionSnap = new ol.interaction.Snap({
source: layerWFS.getSource()
});
我正在选择abcd
作为标签
您需要一个样式函数来设置样式中的文本,而不是您希望显示的任何要素属性
var selectStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
}),
text: new ol.style.Text({
text:("abcd")
})
});
var interactionSelect = new ol.interaction.Select({
style: function(feature) {
selectStyle.getText().setText(feature.get('name'));
return selectStyle;
}
});
你实际显示的是“abcd”字符串本身而不是“abcd”属性的值。要访问ol.Style
中的某些要素属性值,您必须使用StyleFunction
,如下所示:
style: function(feature, resolution){
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1.0)',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.5)'
}),
text: new ol.style.Text({
text: feature.get("abcd");
})
})
}