Question

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

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

if [ ! -z "$PS1" ]; then # PS1 interaction session
        echo $(cat /var/tmp/ssh.command)
fi

当某个设备具有要显示的图标时，我正在将代码注入到功能中。此函数返回所需的img-src。当设备没有图标时，我将显示默认图标。因此，到目前为止，我设法根据每个设备显示正确的图标，但我仍在努力解决不同的图像尺寸。我尝试使用imgSize，size和scale以各种可以想象的方式在ol.style.Icon对象中配置属性，但实际上没有任何效果。谢谢您的帮助。

Answer 1

我建议您使用由src url索引的样式缓存（在任何情况下，解决异步问题都会更有效率）

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;
}

由于设备可能共享图像，因此需要“按需”设置设备名称文本。

Answer 2

如果在->图像中过大，则缩放图标：new ol.style.Icon（....）：

scale: 0.4,

将图标图像大小缩放到绝对值

2 个答案: