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

Question

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

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

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

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

Answer 1

缩放图标如果太大 -> 图片：新 ol.style.Icon(....):

scale: 0.4,

Answer 2

我建议你使用由 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;
}

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

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

Scaling the icon-image size to an absolute value

javascript

jquery

openlayers

openlayers-5