openlayer markers with text, something strange about the level

Question

sandcode: https://codesandbox.io/s/icon-color-forked-v7chj?file=/main.js

I use markers with icon style and text style, but I found something strange. When I added two markers with icon and text style, it seemed like I added two layers which are a icon layer and a text layer. That's to say, icons are in one level, and texts are in another level. I think a marker should be a whole, so it's icon and text should lay in the same level.

enter image description here

Accoding to the picture, the two markers with icon and text ,should be in different two level.But a marker's icon and text separateed.

rome.setStyle(
  new Style({
    image: new Icon({
      color: "#BADA55",
      crossOrigin: "anonymous",
      // For Internet Explorer 11
      imgSize: [180, 180],
      src: "data/square.svg"
    }),
    text: new Text({
      text: "Wow such labeladfasdfasdf",
      offsetY: 0,
      fill: new Fill({
        color: "#42f"
      })
    })
  })
);

score 0 · Accepted Answer · answered Sep 14 '21 at 09:05

Text appears above images as at the same zIndex. If both styles have the same zIndex the text for both will be above both the icons, and the order of the icons is not guaranteed as it will depend on which is rendered first (usually the order of the features in the source). You can use zIndex to keep icons from one style above the text for another, and be sure of which icon will be on top of the other:

  new Style({
    image: new Icon({
      color: "#BADA55",
      crossOrigin: "anonymous",
      // For Internet Explorer 11
      imgSize: [180, 180],
      src: "data/square.svg"
    }),
    text: new Text({
      text: "Wow such labeladfasdfasdf",
      offsetY: 0,
      fill: new Fill({
        color: "#42f"
      })
    }),
    zIndex: 1
  })


  new Style({
    image: new Icon({
      crossOrigin: "anonymous",
      src: "data/bigdot.png",
      scale: 0.2
    }),
    text: new Text({
      text: "Wow such label",
      offsetY: 0,
      fill: new Fill({
        color: "#42f"
      })
    }),
    zIndex: 2
  })

Thanks! It works. But what if I have multi-markers with icon and text, for example 1000, I may use the zIndex from 1 to 1000. Is there another way to do it ? — sharryliao, Sep 15 '21 at 06:39
You could use a property of the feature or its geometry. For example use the x coordinate so features on the right are above their left side neighbours https://codesandbox.io/s/cluster-forked-xng6z — Mike, Sep 15 '21 at 09:51

openlayer markers with text, something strange about the level

1 Answers1