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

我有一个OpenLayers矢量层，对于该层中的点，我使用了一个外部图形，它是这个地方的名称。每个地方都有不同的名称，因此图像宽度也不同。我不想让名字集中在点上，而是希望它指向指向点的一侧（我想图形的形状有点像路标）。通过将graphicXOffset设置为0，我可以很容易地将图像移动到一侧，但我无法设置graphicWidth，因为我不知道图像的宽度

如果我将其设置为错误的值，图像会被挤压。 如果我没有设置graphicHeight和graphicWidth，图像将不会显示

---

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

是否将图标的文件名存储在功能属性中，并使用属性替换来设置外部图形，即：

'externalGraphic': '${icon}'

您可以为所有图像创建预定义的查找表，并使用style或stylemap的上下文函数：

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;
        }
    }
});

将事件侦听器添加到

'beforefeatureadded'

对另一个返回图像大小的web服务方法进行同步AJAX调用

然后将

宽度

和

高度

设置为特征的属性

在样式中使用替换

---

externalGraphic属性是指向将为我生成PNG的Web服务的url。我事先不知道宽度是多少，因为这取决于Web服务选择的字体和文本周围的填充。我很遗憾这是最好的解决方案