image - OpenLayers 中每层有多个图像

Question

是否可以在 OpenLayers 的一个图层中放置多个图像？

理想情况下，我想将我的图片分类（每一层都是一个类别），这样我就可以整体显示和隐藏每个类别，而不是显示/隐藏每张图片。

这可能吗？我发现了几个使用 OpenLayers 的 Image 层（似乎只支持一个图像）或带有 StyleMap 的 Vector 层（似乎也只允许一个外部图像）的示例。

我是否忽略了某些东西或者需要更多的努力（即创建自定义图层类型）？

提前致谢！

Answer 1

要将多个图像放在同一层中，您可以像这样创建一个 styleMap

var style = new OpenLayers.StyleMap({
    default :new OpenLayers.Style({
          'pointRadius': 10,
          'externalGraphic': '/images/${icon}.png'
    })
})

其中“${icon}”是特征的一个属性。

在下一个示例中，我使用 2 张图片“star”和“home”

var path = new OpenLayers.Layer.Vector( "images" );
//set the styleMap
path.styleMap = style;
map.addLayers([path]);

//create a new feature
var pointHome = new OpenLayers.Geometry.Point(-57.533832,-25.33963);
var featureHome = new OpenLayers.Feature.Vector(pointHome);
//set the icon of the feature
featureHome.attributes["icon"] ="home";

var pointStar = new OpenLayers.Geometry.Point(-57.533371,-25.338946);
var featureStar = new OpenLayers.Feature.Vector(pointStar);
//set the icon of the feature
featureStar.attributes["icon"] ="star";

path.addFeatures([featureHome, featureStar]);