OpenLayers 3 - 在地图上显示文本,相对于缩放的文本大小

时间:2016-08-31 09:43:46

标签: javascript openlayers-3

我目前正在使用OL3并尝试在地图上显示文字。没问题,我使用ol.style的text属性来显示它。

我的问题如下:此文本的大小始终相同。即:如果我是最大或最大缩放,它在屏幕上仍然是相同的大小。我希望它在缩放时增长,并在收缩时缩小以保持文本相对于地面的大小。

我在下图中绘制了预期结果: Expected result

有人有想法吗?也许没有使用ol.style文本?

1 个答案:

答案 0 :(得分:3)

要走的路是a style function。请参阅演示fiddle

var style = function () {
  var zoom = map.getView().getZoom();
  var font_size = zoom * 10; // arbitrary value

  return [
    new ol.style.Style({
      text: new ol.style.Text({
        font: font_size + 'px Calibri,sans-serif',
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({
          color: '#fff', width: 2
        }),
        text: 'Some text!'
      })
    })
  ];
};