為在 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）。

圖像是任何圖像，例如一朵花。 它是一個透明圖像，邊框為花的形狀，所以我需要繪制一個非矩形的輪廓。

該圖像也是基於 svg 圖像的 Icon 對象

除了在圖像周圍繪制輪廓之外，還有其他好的解決方案嗎？

如何在圖像周圍添加輪廓？

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 顏色使RegularShape的Fill和Stroke顯示為半透明。