Openlayers 3:为功能添加文本标签

时间:2016-08-17 21:31:36

标签: javascript openlayers-3

我在这里设置了当前设置:fully functional fiddle example虽然我已设法缩放到每个多边形要素,但我还想在每个...上显示一个集中文本标签...找到field_title变量在get_fields方法中。我不知道如何做到这一点,所有我的谷歌搜索都提出了这篇文章:http://openlayers.org/en/v3.3.0/examples/vector-labels.html我发现这完全令人困惑,因为我对OL有点新鲜!

2 个答案:

答案 0 :(得分:13)

要向ol.Feature添加文字,您需要将该说明存储在该要素中,并将set a style存储为style function(将从该要素中获取说明并进行展示):< / p>

field_polygon.set('description', field_title);
field_polygon.setStyle(styleFunction);

function styleFunction() {
  return [
    new ol.style.Style({
        fill: new ol.style.Fill({
        color: 'rgba(255,255,255,0.4)'
      }),
      stroke: new ol.style.Stroke({
        color: '#3399CC',
        width: 1.25
      }),
      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: map.getView().getZoom() > 12 ? this.get('description') : ''
      })
    })
  ];
}

Your fiddle

答案 1 :(得分:0)

由于我是新来的,并且不允许发表评论,因此我将评论作为@ andre_ss6问题的新答案。我还在O(n log(n))上得到了S。对我有用的是将特征对象作为函数的第一个参数传递:

Window

,然后使用该参数代替this

function styleFunction(feature) {