Question

我有一张天气图，我想根据每个点参数中的值显示不同的天气图标。一旦我得到每个Icon的值，我就必须将它与一个对象数组的数量进行比较并获得特定的键值。

一旦我知道了地图中每个点的关键值，我想将它们与包含所有图标的垂直精灵图像的偏移位置相匹配。每个图标都是35x35px所以我可以将value参数与图标的高度相乘并得到位置。

但是我在我的地图中努力实现这一点，到目前为止我还是这样：

// 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]
            })
         })
      );
      }

   }
}

Answer 1

您对象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]
      })
   })
);

打开图层3使用数字值来显示不同的图标

1 个答案: