【问题标题】:Openlayers 3 feature label position relative to size of feature?Openlayers 3特征标签位置相对于特征大小?
【发布时间】:2016-09-14 20:23:01
【问题描述】:

我在 OL 地图上有多个图层,其中包含相同大小特征的轮廓、背景颜色和标签,因此您可以显示或隐藏一个或多个图层。其中两个图层只是标签......样式不包含填充或描边。一个标签应位于特征中心的另一个标签之上,但 OL 似乎将它们垂直分布在相对于特征多边形的高度更远或更近的地方,如下所示:

我尝试在下部标签的文本样式块中设置offsetY: 15,在下部标签之前添加换行符并在下部标签上设置textBaseline:'top',在顶部设置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 将偏移量视为百分比,而不是文档中所述的像素:

【问题讨论】:

  • 据我所知,它似乎以像素为单位:tinyurl.com/hxpj6hn 显示了一个适用于像素的示例。尝试返回一组样式,每个数组中都有一个文本样式。结果一样?

标签: openlayers-3


【解决方案1】:

由于我的代码中存在一些复杂的循环,我忽略了某些字段上的多边形边界之间存在细微差异,这意味着它们的标签显示在稍微不同的位置。现在我已经使所有多边形边界都相同,标签确实与offsetY 的行为符合预期。我很抱歉。

【讨论】:

    【解决方案2】:

    更多的是解决方法而不是答案,因为我认为您的方法没有任何问题,但这会产生相同的结果吗?

    [
    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
        })
    })]
    

    【讨论】:

    • 我不太确定你建议我如何实现这个?
    • 我建议您将两种文本样式放在一个图层上,而不是让两个图层具有相同的几何形状。
    • 啊,我明白了...我不能,因为我必须能够独立切换它们的可见性。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-03
    • 2011-02-06
    相关资源
    最近更新 更多