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

【问题标题】：Openlayers vector layer external graphic of unknown width未知宽度的Openlayers矢量图层外部图形
【发布时间】：2012-10-29 01:27:49
【问题描述】：

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

如果我将其设置为错误的值，图像会被压扁。如果我不设置图形高度和图形宽度，图像不会出现。

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

【问题讨论】：

标签： openlayers

【解决方案1】：

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

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

【讨论】：

externalGraphic 属性是一个 Web 服务的 URL，它将为我生成一个 PNG。我不会事先知道宽度是多少，因为这取决于网络服务选择的字体和文本周围的填充。

【解决方案2】：

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

【讨论】：

我很遗憾这是最好的解决方案