OpenLayers3图标合成图像

Question

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

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

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

2. （首选解决方案）。 使用图标图像并用额外的CSS设置样式（例如图像背景？？？）

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

Answer 1

我想建议另一个选择：使用SVG图标。 可以使用CSS修改SVG图像的部分（线条，符号等） 。

这样，您可以将图标构造为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;
}