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

Open Layers 3 use a number value to show different icon

本文关键字：显示 图标 数字 图层      更新时间：2023-09-26

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

一旦我知道地图中每个点的关键值，我想将它们与包含所有图标的垂直精灵图像的偏移位置相匹配。每个图标都是 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]
            })
         })
      );
      }
   }
}

您的对象 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]
      })
   })
);
相关文章：