为 angular 8 在开放图层中创建的图像添加边框

Question

我正在 Angular 8 中使用开放层进行编程（在 package.json ol 中是版本 ^5.3.6）。

当我为图像创建新样式时，我会执行以下操作：

const myIcon = new Style({
image:new Icon({
   anchor:[0,0],
   anchorOrigin: IconOrigin.BOTTOM_LEFT,
   anchorXUnits:IconAnchorUnits.PIXELS,
   anchorYUnits: IconAnchorUnits.PIXELS,
   color: rgb(128,128,128),
   src: 'myimage.svg'
 })
});

颜色必须是灰色。当图像在黑暗（黑色或灰色图像）上时，几乎看不到图像。

所以，我想在图像周围画一个白色的轮廓（我怎样才能计算出一个好的负轮廓，因为 128 的负数是 128）。

图像是任何图像，比如一朵花。花的形状是带边框的透明图片，所以需要画一个非矩形的轮廓。

图像也是一个 Icon 对象，基于 svg 图像

除了在图像周围绘制轮廓外，还有其他好的解决方案吗？

如何在图像周围添加轮廓？

Answer 1

一个 OpenLayers 样式也可以由多个样式组成的数组组成，数组中的第一项将首先渲染，因此在底部。

一种可能是在图像下方制作一个尺寸正确的矩形，如下所示： https://openlayers.org/en/latest/examples/regularshape.html

样式看起来像这样：

const styles = [
  new Style({
    image: new RegularShape({
      stroke: new Stroke({
       color: 'white',
       width: 5
      }),
      points: 4,
      angle: 0,
      // adjust these numbers according to your image 
      radius: 10 / Math.SQRT2,
      radius2: 10,
      scale: [1, 0.5],
    })
  }),
  myIcon
]

不确定负轮廓，虽然通常我会避免纯色轮廓以外的任何东西，地图本身已经是非常复杂的图形。但是，您可以使用 rgba 颜色制作 Fill 和 RegularShape 的 Stroke，因此它们看起来是半透明的。

为 angular 8 在开放图层中创建的图像添加边框

Add a border to an image that created in open layers for angular 8

svg

image

openlayers

angular