web-dev-qa-db-ja.com

Openlayers 3：機能にテキストラベルを追加する

私は現在ここに設定しています： 完全に機能するフィドルの例 そして、各ポリゴンフィーチャにズームできましたが、それぞれに集中テキストラベルを表示したいと思います... field_title変数はget_fieldsメソッド内で見つかりました。私はこれを行う方法がわかりません、そして私のすべてのグーグルはこの記事を思い付きました： http://openlayers.org/en/v3.3.0/examples/vector-labels.html 私はそれを見つけます私はOLに少し新しいので、完全に混乱しています！

javascriptopenlayers-3
8
Helen Danger Burns

テキストをol.Featureに追加するには、機能に説明を保存し、 スタイルを設定スタイル関数 （機能から説明を取得します）そしてそれを示す）：

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') : ''
      })
    })
  ];
}

あなたのフィドル 。

15
Jonatas Walker