将图标图像大小缩放为绝对值 [英] Scaling the icon-image size to an absolute value

问题描述

我正在开发一个应用程序，其中一个功能是使用开放图层在地图上显示设备.这些设备可以由用户添加，并且它们都可以使用上传的图像自定义图标图像.该图像也可以在运行时根据某些设备属性(例如温度)进行更改.根据我阅读他们的文档的理解，ol.style.Icon 对象上有一些属性，如 imgSize，它们都是切割的，但不缩放图像.还有一个称为 scale 的其他属性，它实际上可以缩放图像.但由于图像大小可能会有所不同，因此比例并不总是相同，必须进行计算才能在每个设备上拥有相同的图标大小(40 宽).

I'm developing an application where one functionality is displaying a device on a map using open-layers. These devices can be added by the user and they all can have a custom icon-image using an uploaded image. This image can also be changed on runtime depending on some of the devices attributes (for example the temperature). From what i understood reading through their documentation, there are some properties on the ol.style.Icon object like imgSize which is are all cutting, but not scaling the image. There is also an other property called scale which does in fact scale the image. But since the image size can vary, the scale is not always the same and must be calculated in order to have the same icon size on each device (40 width).

为了根据设备计算正确的图标，我在 layer.Vector 对象上使用此样式函数.

For calculating the right icon depending on the device i am using this style-function on my layer.Vector object.

function(feature){
  var device = feature.get("device");
  var icon = (device.familyIds.length > 0 ? icons.find(i => i.familyIds.includes(device.familyIds[0])) : undefined);
  return new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      src: (icon != undefined ? new Function("device", "familyProperty", icon.iconSource)(device, icon.familyProperty) : './img/icons/icon_default.png')
    }),
    text: new ol.style.Text({
      text: device.name,
      offsetY: 15,
      font: "20px Calibri,sans-serif"
    })
  });
}

当某个设备有一个图标可以显示时，我正在向一个函数中注入一个代码.此函数返回所需的 img-src.当设备没有图标时，我显示的是默认图标.所以到目前为止，我设法根据每个设备显示正确的图标，但我仍然在为不同的图像大小而苦苦挣扎.我尝试使用 imgSize、size 和 scale 以各种可以想象的方式配置 ol.style.Icon 对象中的属性，但没有任何效果.感谢您的帮助.

When a certain device has an icon to display, i am injecting a code into a funciton. This function returns the desired img-src. When a device has no icon, i am displaying a default one. So till now, I managed to display the right icon depending on each device but i am still struggling with the different image-sizes. I tried configuring the attributes in the ol.style.Icon object in every imaginable way using imgSize, size and scale but nothing really worked. Thank you for your help.

推荐答案

我建议你使用 src url 索引的样式缓存(它在任何情况下都更有效，应该解决异步问题)

I suggest you use a style cache indexed by src url (it's more efficient in any situation should resolve the async problem)

var styleCache = {};

var styleFunction = function(feature){
  var device = feature.get("device");
  var icon = (device.familyIds.length > 0 ? icons.find(i => i.familyIds.includes(device.familyIds[0])) : undefined);
  var url = (icon != undefined ? new Function("device", "familyProperty", icon.iconSource)(device, icon.familyProperty) : './img/icons/icon_default.png');
  var style = styleCache[url];
  if (!style) {
    style = new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 1],
        src: url,
        scale: 0
      }),
      text: new ol.style.Text({
        offsetY: 15,
        font: "20px Calibri,sans-serif"
      })
    });
    var img = new Image();
    img.onload = function() {
      style.getImage().setScale(40/img.width);
      feature.changed();  // force a refresh or just wait until next render?
    }
    img.src = url;
    styleCache[url] = style;
  }
  style.getText().setText(device.name);
  return style;
}

设备名称文本需要按需"设置，因为设备可能会共享图像.

The device name text will need to be set "on demand" as devices might shares images.

这篇关于将图标图像大小缩放为绝对值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！