2016-01-24 22 views
0

我有一個天氣圖,我想根據每個點參數中的值顯示不同的天氣圖標。一旦我得到每個圖標的值,我必須將它與對象數組的數量進行比較,並獲取特定的鍵值。打開圖層3使用數字值顯示不同的圖標

一旦我知道地圖中每個點的關鍵值,我想將它們匹配到包含所有圖標的垂直精靈圖像的偏移位置。每個圖標都是35x35像素,所以我可以將值參數乘以圖標的高度並獲取位置。

但我掙扎在我的地圖來實現這一點,這是啥子我至今:

// Object array with specific parameters 
var obg = { 
{1:34},{2:11},{3:54} 
} 

// Create a layer for the weather icons 
var layerWeather = new ol.layer.Vector({ 
    name: 'dwc', 
    preload: 4, 
    source: vectorSource, // GeoJSON source 
    style: weatherIcon 
}); 

// Create a Weather Icon Style 
var weatherIcon = function(feature) { 

    // Get the value of the icon 
    var iconVal = parseFloat(Math.round(feature.get('value'))); 

    // Loop each value 
    $.each(obj, function(number, value) { 

     // Create vertical offset offset calculation 
     var offsetY = value * 35; 

     // Check if the number equals the icon value 
     if (number == iconVal) { // if number is 1 and icon has value 1 

     // Create a new icon style 
     feature.setStyle(
     new ol.style.Style({ 
      image: new ol.style.Icon({ 
       src: 'urlIconPath', 
       offset: [0, offsetY], // Vertical Icon Sprite 
       size: [35, 35] 
      }) 
     }) 
    ); 
     } 

    } 
} 
+1

我有點困惑,是不是'iconVal'只是一個浮動,爲什麼你會堅持它在'$ .each'? – adeneo

+0

@adeneo你說得對,我已經進一步擴展了我的問題。 –

回答

0

你反對OBG是無效的。這應該工作:

var obg = {1:34,2:11,3:54}; 


var offsetY = obg[iconVal] * 35; 
feature.setStyle(
    new ol.style.Style({ 
     image: new ol.style.Icon({ 
      src: 'urlIconPath', 
      offset: [0, offsetY], // Vertical Icon Sprite 
      size: [35, 35] 
     }) 
    }) 
);