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矢量圖層未知寬度的外部圖形

回答

相關問題