我在OL地图上有多个图层,其中包含相同尺寸要素的轮廓,背景颜色和标签,因此您可以显示或隐藏一个或多个图层。其中两个层只是标签......样式不包含填充或描边。一个标签应位于要素中心的另一个标签上方,但OL似乎相对于要素多边形的高度将它们垂直地远离或更靠近地展开,如下所示:
我尝试在较低标签的文字样式块中设置offsetY: 15
,在较低标签前添加换行符,并在较低标签上设置textBaseline:'top'
并在{0}上设置textBaseline:'bottom'
顶部(这是最后的尝试!)但它们总是以不同的方式传播!
这是我的上标签的样式块:
function fields_label_style() {
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,255,0)',
width: 1
}),
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#ffffff' }),
stroke: new ol.style.Stroke({
color: '#000000', width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : ''
})
})
];
}
对于较低的标签:
function cropping_label_style() {
return [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,255,0)',
width: 1
}),
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#ffffff' }),
stroke: new ol.style.Stroke({
color: '#000000', width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : '',
offsetY: 15
})
})
];
}
两者绝对具有相同的多边形轮廓。没有问题。我只能认为OpenLayers可能会将偏移量视为百分比而不是文档中所述的像素:
答案 0 :(得分:0)
更多的解决方法而非答案,因为我认为您的方法没有任何问题,但这会产生相同的结果吗?
[
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,255,255,0)',
width: 1
})
}),
new ol.style.Style({
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#ffffff'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : ''
})
}),
new ol.style.Style({
text: new ol.style.Text({
font: '13px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#ffffff'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 2
}),
// get the text from the feature - `this` is ol.Feature
// and show only under certain resolution
text: map.getView().getZoom() > 14 ? this.get('description') : '',
offsetY: 15
})
})]
答案 1 :(得分:0)
由于我的代码中有一些复杂的循环,我忽略了某些字段的多边形边界之间存在轻微差异,这意味着它们的标签显示在略有不同的位置。现在我已经使所有的多边形边界与标签确实正确对齐,offsetY
的行为符合预期。道歉。