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

Question

我有一个openlayers向量层，对于该层中的点，我使用的是外部图形，这是该位置的名称。每个地方都有不同的名称，因此具有不同的图像宽度。我没有将名称集中在我想要的点上，而是将其指向指向位置（我猜想的图形有点像路标）。我可以通过将GraphicXoffset设置为0来轻松地将图像移到侧面，但是我无法设置GraphicWidth，因为我不知道图像的宽度。

如果我将其设置为错误的值，则图像将被压缩。如果我不设置graphicheight和graphicticwidth，则不会出现图像。

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

Answer 1

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

'externalGraphic': '${icon}'

您可以为所有图像创建预定义的查找表，并使用样式或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;
        }
    }
});

Answer 2

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