解决这个问题的方法有很多种，这里提供一种基于HTML、CSS和JavaScript的解决方案。

首先，我们可以使用HTML来创建一个基本的页面结构，包含不同的图层组和图标。然后，使用CSS来设置不同图层组的样式和图标的颜色。最后，使用JavaScript来实现点击图标时弹出相应的窗口。

HTML代码示例：

CSS代码示例：

.layer-group {
  width: 100px;
  height: 100px;
  background-color: lightgray;
  margin-bottom: 10px;
}

.icon {
  width: 50px;
  height: 50px;
  margin: 25px;
}

#icon1 {
  background-color: blue;
}

#icon2 {
  background-color: green;
}

JavaScript代码示例：

document.getElementById("icon1").addEventListener("click", function() {
  alert("这是图层组1的弹出窗口。");
});

document.getElementById("icon2").addEventListener("click", function() {
  alert("这是图层组2的弹出窗口。");
});

上述代码中，我们为图层组添加了一个点击事件监听器，当图标被点击时，会弹出相应的窗口显示图层组的信息。

通过以上的HTML、CSS和JavaScript代码，我们可以实现不同图层组的不同颜色图标和弹出窗口。当点击图标时，会弹出相应图层组的信息窗口。你可以根据需要修改CSS样式和JavaScript代码，来满足你的具体需求。