带有文本的 openlayer 标记，关卡有些奇怪

Question

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

我使用了图标样式和文本样式的标记，但我发现了一些奇怪的东西。当我添加两个带有图标和文本样式的标记时，好像我添加了两个层，即图标层和文本层。也就是说，图标是一个层次，文字是另一个层次。我认为标记应该是一个整体，所以它的图标和文字应该在同一水平面上。

enter image description here

根据图片，有图标和文字的两个标记，应该是不同的两个level.But一个标记的图标和文字分开。

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

Answer 1

文字显示在图像上方，与 zIndex 相同。如果两种样式具有相同的 zIndex ，则两者的文本将位于两个图标上方，并且不能保证图标的顺序，因为它将取决于先呈现哪个（通常是源中功能的顺序).您可以使用 zIndex 使一种样式的图标保持在另一种样式的文本上方，并确保哪个图标位于另一种样式之上：

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

带有文本的 openlayer 标记，关卡有些奇怪

openlayer markers with text, something strange about the level

text

icons

styles

openlayers-6