在图层中更改单个矢量特征的图标

时间:2012-09-10 15:07:21

标签: javascript icons openlayers

目前我正在尝试更改用户关注的矢量图层的特定功能的图标。我将每个功能添加到地图中,如下所示:

var point = new OpenLayers.Geometry.Point(pt.lon, pt.lat);
var markerStyle = OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'],  {
    externalGraphic: iconURL
});
var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);

稍后我会执行以下操作来更新功能的图标:

var marker = this.findSelectedMarker();
if (marker) {
    marker.style.externalGraphic = newIconUrl;
    this.layer.redraw();             
}

但是当图层重绘时,我图层中的所有功能都使用newIconUrl,而不仅仅是我想要更新的所选标记。

如何更改图层所选功能的图标?感谢。

1 个答案:

答案 0 :(得分:1)

我需要解决两个问题才能解决这个问题。第一个与使用多个OpenLayers样式有关,无论是在层级还是单个功能级别。我删除了每个单独功能的样式,因此只实现了以下图层样式:

this.layerStyle = new OpenLayers.StyleMap({ 
    'default': {
        externalGraphic: media_url + '${iconURL}',
        graphicHeight: 32,
        graphicWidth: 32,
        graphicXOffset: -16,
        graphicYOffset: -32,
        fillOpacity: 0.75
    }
});

我做的第二个更改是使用属性替换语法来指定带有名为'${iconURL}'的要素属性的图标URL。这允许我通过简单地更改所选要素的属性并重新绘制图层来更改图标URL:

focusedMarker.attributes.iconURL = this.focusedURL;
this.layer.redraw();