Geek Answers Handbook

Does Openlayers 3 show the position of the label relative to the size of the function?

I have several layers on an OL map that contain paths, background colors and labels for the same size, so you can show or hide one or more layers. Two of these layers are just labels ... the style does not contain a fill or stroke. One label should be located above the other in the center of the center of the function, but OL apparently distributes them vertically farther or closer to each other relative to the height of the polygon of the object, for example:

enter image description here

I tried setting offsetY: 15 in the bottom label text style block by adding a line break before the bottom label and setting textBaseline:'top' on the bottom label and textBaseline:'bottom' on the top (this was the last ditch!), But they always propagate through to different things!

Here is my style block for the top label:

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

And for the bottom label:

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

Both have the same polygon outline. No questions. I can only think that maybe OpenLayers treats the offset as a percentage, not pixels, as the documentation says:

enter image description here

+7
openlayers-3
source share
2 answers

Due to some complex loops in my code, I overlooked that there was a slight mismatch between the borders of the polygons on some of the fields, which means that their labels were displayed in several different places. Now I have made all the borders of the polygon the same, so the label really lines up correctly, and offsetY behaves as expected. My apologies.

0
source share

More workaround than answer, because I see nothing wrong with your approach, but does it do the same result?

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

More articles:


All Articles