OpenLayers3图标合成图像

Question

我有一个带有代表用户的图像图标的矢量图层。我想根据用户状态（例如，可用，忙碌）动态设置图标的样式，而不必使用两个不同的图标图像。

我想使用以下两种解决方案之一：

1. 以编程方式更改图标图像颜色（例如绿色用户图标为可用，红色为不可用）。再次 - ＆gt;不能选择具有不同状态的多个图像。我需要一个图像作为图标src，以编程方式操作颜色。

2. （prefferred solution）。使用图标图像并使用额外的CSS设置样式（例如图像背景???）

我目前唯一的解决方法是在同一位置添加2个标记。一个用于用户状态图标，一个用于实际用户。

Answer 1

我想提出另一个选择：使用SVG图标。可以modify parts (lines, symbols, ect) of a SVG image with CSS。

这样，您可以将您的图标构建为SVG，并根据用户状态应用类。

你的SVG看起来像这样（伪代码）：

<svg class="user-icon available" ... >
  <polyline class="your-icon" .../>
  <circle class="status" .../>
</svg>

您可以根据用户状态使用CSS来定位它：

user-icon.available {
  fill: green;
}

.user-icon.busy {
  fill: red;
}