Openlayers 3相对于特征大小的特征标签位置？

我在OL地图上有几个图层，包含相同大小的特征的轮廓，背景颜色和标签，因此您可以显示或隐藏一个或多个图层。其中两个图层只是标签...样式不包含填充或描边。一张标签应该坐在上面的其他的功能中心为中心，但OL似乎它们分散垂直进一步远离或靠近在一起，在相对于特征多边形的高度，这样的：Openlayers 3相对于特征大小的特征标签位置？

我曾尝试在较低标签的文本样式块中设置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被处理偏移量为一个百分比，而不是如文档中陈述像素：

来源

2016-09-14 Helen Danger Burns

看起来像它是从我可以告诉的像素：tinyurl.com/hxpj6hn显示一个示例，适用于像素。尝试在每个数组中使用一种文本样式返回样式数组。同样的结果？ –

由于我的代码一些复杂的回路我忽视的是，有一些领域的多边形边界略有出入，这意味着他们的标签被显示在稍有不同的地方。现在我已将所有多边形边界设置为相同，标签确实与offsetY的行为正确无误。我很抱歉。

来源

2016-09-22 11:05:22

更多的解决方法不是一个答案，因为我认为没有错用你的方法，但这是否会产生相同的结果？

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

来源

2016-09-17 22:41:50

我不太清楚你是如何建议我实现这个？ –

我建议你将两种文本样式放在一个图层上，而不是将两个图层放在同一个几何图形中。 –

啊我看到了...我不能，因为我必须能够独立地切换他们的知名度。 –

Openlayers 3相对于特征大小的特征标签位置？

回答

相关问题