javascript - OpenLayers:如何让backgroundGraphic进入externalGraphic下

Question

我有一个具有节点功能的图层，我可能想在其上显示两个图像，一个主图像和一个背景图像。本页:http://openlayers.org/dev/examples/marker-shadow.html显示了我想要的:阴影位于金色元素下方(当我们使用开发工具移动 png 时更明显)。为此，他们使用:

// Set the external graphic and background graphic images.
externalGraphic: "../img/marker-gold.png",
backgroundGraphic: "./img/marker_shadow.png",

// Makes sure the background graphic is placed correctly relative
// to the external graphic.
backgroundXOffset: 0,
backgroundYOffset: -7,

// Set the z-indexes of both graphics to make sure the background
// graphics stay in the background (shadows on top of markers looks
// odd; let's not do that).
graphicZIndex: MARKER_Z_INDEX, //11
backgroundGraphicZIndex: SHADOW_Z_INDEX, //10

显然这与真正的 CSS z-index 无关，因为 DOM 元素最后都有一个 z-index: auto 。但无论如何，我想自己尝试一下(不是在层构建时而是在之后):

style["backgroundGraphic"] = './img/marker-shadow.png';
style["externalGraphic"] ='./img/marker-gold.png';
style['graphicZIndex'] = 1;
style['backgroundGraphicZIndex'] = style['graphicZIndex']-1;

显示图像。但是，虽然人们可能认为backgroundGraphic会自动进入externalGraphic之下，但实际上却发生了相反的情况。好吧，我只需添加 z-index 即可:

style['graphicZIndex'] = 1;
style['backgroundGraphicZIndex'] = style['graphicZIndex']-1;

但它绝对没有改变任何东西。如何将背景置于下方？

Answer 1

这有点棘手。样式和样式图是要素所在图层的属性。您应该定义样式，将它们放入样式图中并在图层构造中使用它。您可以通过更改功能的 renderIntent 来“随时随地”更改功能的样式。 renderIntent 指的是样式图中的样式名称。然后调用layer.redraw()

你应该使用的实际 zIndex 也让我困惑。我使用 10 个步骤来始终可以选择在中间添加一些内容，而无需更改整个批处理。