我有一个天气图,我想根据每个点参数中的值显示不同的天气图标。获得每个图标的值后,我必须将其与对象数组的数量进行比较并获取特定的键值。
一旦我知道地图中每个点的关键值,我想将它们与包含所有图标的垂直精灵图像的偏移位置相匹配。每个图标都是 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]
})
})
);