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

我有一个OpenLayers矢量图层，并且对于该图层中的点，我使用的是外部图形，它是该地点的名称。每个地方都有不同的名称，因此具有不同的图像宽度。而不是让名字集中在我想让它指向现场的那一点上（我想这个图形有点像道路标志）。通过将graphicXOffset设置为0，我可以轻松地将图像移动到一侧，但我无法设置graphicWidth，因为我不知道图像的宽度。Openlayers矢量图层未知宽度的外部图形

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

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

来源

2012-10-29 Craig

你存储在要素的属性文件名的图标，并使用属性更换设置externalGraphic，即：

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

来源

2012-10-29 08:45:57 user1702401

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

添加事件侦听到该层为'beforefeatureadded'
做一个同步ronous AJAX调用另一个返回图像大小的Web服务方法。
然后将width和height设置为特征的属性。
使用${widthAttr},${heightAttr}替换样式。

来源

2013-01-31 00:36:45 mpaxtonabcd

我很伤心，这是最好的解决方案 – rocketsarefast

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

回答

相关问题