Openlayers矢量图层未知宽度的外部图形

Question

我有一个OpenLayers矢量图层，对于该图层中的点我使用的是外部图形，这是该地点的名称。每个地方都有不同的名称，因此图像宽度不同。而不是让名称居中于该点，我希望它指向该位置的一侧（图形形状有点像路标我猜）。我可以通过将graphicXOffset设置为0来轻松地将图像移到侧面，但我无法设置graphicWidth，因为我不知道图像的宽度。

如果我将其设置为错误的值，图像会被压扁。 如果我没有设置graphicHeight和graphicWidth，则不会出现图像。

我目前唯一的想法是使图像具有固定的宽度，额外的空间是透明的，但该区域仍然是可点击的，这对用户来说是非常奇怪的。

Answer 1

您是否在要素的属性中存储图标的文件名，并使用属性替换来设置externalGraphic，即：

'externalGraphic': '${icon}'

您可以为所有图像创建预定义的查找表，并使用样式或样式图的上下文功能：

var style = new OpenLayers.Style({
    externalGraphic: '${icon}',
    graphicWidth: '${getWidth}',
    /* etc... */
}, {
    context: {
        getWidth: function(feat) {
            var lookup = {
                'london.png': 120,
                'manchester.png': 150
            }
            var defaultWidth = 100;
            return lookup[feat.attributes.icon] || defaultWidth;
        }
    }
});

Answer 2

1. 为'beforefeatureadded'
的图层添加事件监听器
2. 对另一个返回图像大小的Web服务方法进行同步AJAX调用。
3. 然后将width和height设置为功能的属性。
4. 在样式中使用${widthAttr}，${heightAttr}替换。