2

Goal:

I am trying to display two labels for a line using OpenLayers 6.2 (one above the line, and one below the line) while the decluttering feature is turned on. Picture of target state with decluttering on. Make labels closser

Problem:

When decluttering is turned off, I can achieve my goal, but when decluttering is turned on it will turn off the text below the line.

Background:

Please refer to the attached CodeSandbox (index.js file) (or the code snippet below) – where I have setup an example of my current javascript– on line 19 and 30 if the numbers are changed to -23 or 24 (or anything closer to the line) respectively, you will note the bottom label will turn off if decluttering is set to true on line 64 https://codesandbox.io/s/line-label-style-7y5ly

feature.setStyle([
  new Style({
    stroke: new Stroke({
      color: "blue",
      width: 3
    }),
    text: new Text({
      text: "Text 1 Lorem Ipsum",
      placement: "line",
      textBaseline: "middle",
      offsetY: -24,
      padding: [-10, -10, -10, -10],
      stroke: new Stroke({ color: "red" }),
      backgroundStroke: new Stroke({ color: "red" })
    })
  }),
  new Style({
    text: new Text({
      text: "Text 2 Lorem Ipsum",
      placement: "line",
      textBaseline: "middle",
      offsetY: 25,
      padding: [-10, -10, -10, -10],
      stroke: new Stroke({ color: "blue" }),
      backgroundStroke: new Stroke({ color: "blue" })
    })
  })
])
dannym
  • 21
  • 3
  • 1
    I don't think you can achieve that. If you don't turn off decluttering, when label canvas bounding box intersect only the topmost will be render. I think, this is why one of the labels dissapear when you try to get both close. Under your scenario, you can only play with text size and offsets. – cabesuon Feb 26 '20 at 04:26
  • 1
    @cabesuon does that mean there is no way to customise the decluttering function? – nstillwell Feb 26 '20 at 04:50
  • 2
    You could use a single text style with the labels separated by newlines https://codesandbox.io/s/line-label-style-kh2r5 but that would limit you to one color and the labels appear left of the center point. – Mike Feb 26 '20 at 09:35
  • 1
    @nstillwell I honestly don't have that answer, I couldn't find anything like that in the API – cabesuon Feb 26 '20 at 13:17
  • 1
    @Mike that is a great alternative, you should post it as an (alternative) answer – cabesuon Feb 26 '20 at 13:18

0 Answers0