javascript - OpenLayers 3 - Display text on map, text size relative to zoom - Stack Overflow

admin管理员组

文章数量:1430704

I'm currently working on OL3 and trying to display a text on my map. No problem with that, I'm using the text property of ol.style to display it.

My problem is the following: this text has always the same size. ie: if I'm unzooming max or zooming max, it's still the same size on the screen. I want it to grow while zooming, and shrink while unzooming to keep the text's size relative to the ground.

I drew the expected result in the following image: Expected result

Is anyone having an idea? Maybe without using a ol.style text?

I'm currently working on OL3 and trying to display a text on my map. No problem with that, I'm using the text property of ol.style to display it.

My problem is the following: this text has always the same size. ie: if I'm unzooming max or zooming max, it's still the same size on the screen. I want it to grow while zooming, and shrink while unzooming to keep the text's size relative to the ground.

I drew the expected result in the following image: Expected result

Is anyone having an idea? Maybe without using a ol.style text?

• javascript
• openlayers-3

Share Improve this question Follow edited Aug 31, 2016 at 13:54 Jonatas Walker 14.2k66 gold badges5757 silver badges8282 bronze badges asked Aug 31, 2016 at 9:43 Yoann BYoann B 12322 silver badges1212 bronze badges 1

• Any feedback ...? – Jonatas Walker Commented Sep 8, 2016 at 7:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The way to go is a style function. See demo 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!'
      })
    })
  ];
};

本文标签： javascriptOpenLayers 3Display text on maptext size relative to zoomStack Overflow