2

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

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

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

4

2 回答 2

0

您是否在功能属性中存储图标的文件名并使用属性替换来设置 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;
        }
    }
});
于 2012-10-29T08:45:57.503 回答
0
  1. 为图层添加事件监听器'beforefeatureadded'
  2. 对另一个返回图像大小的 Web 服务方法进行同步 AJAX 调用。
  3. 然后将width和设置height为特征的属性。
  4. 在样式中使用${widthAttr}、${heightAttr}替换。
于 2013-01-31T00:36:45.710 回答