如何在openlayers中定義webgl點的大小？

Question

我使用 webgl 點圖層創建了圓圈，但我不知道如何更改大小。 我怎么做？ 基本鏈接： https : //openlayers.org/en/latest/examples/webgl-points-layer.html我的風格如下：

style: {
    symbol: {
      symbolType: 'circle',
      size: [
        "interpolate",
        [
          "exponential",
          2.5
        ],
        [
          "zoom"
        ],
        2,
        1,
        14,
        32
      ],
      color: 'rgba(255,0,0,0.5)'
    }
  }

我需要與這些圈子的行為相同： http : //smartcitybr-app-isolated-functions.s3-website-us-east-1.amazonaws.com/index.html

Answer 1

它在示例中有效，盡管大小不會增加到縮放 14 以上。如果需要，您可以更改最大縮放和大小，還將指數基數減少到 2 使轉換更好地與不斷變化的分辨率相關。

"size": [
  "interpolate",
  [
    "exponential",
    2
  ],
  [
    "zoom"
  ],
  2,
  1,
  28,
  256
],

唯一直接支持的多邊形是三角形和正方形。 它們可以在兩個維度上進行縮放和旋轉，因此您可以使用以下方法獲得一個矩形：

  "symbolType": "square",
  "size": ["array", ["/", 2000, ["resolution"]], ["/", 1000, ["resolution"]]],

對於更復雜的多邊形，您需要使用"symbolType": "image",並提供一個圖標 src，它可以是您在 2d 畫布上繪制的內容的 dataURL，或者您可以使用 OpenLayers 來生成形狀，例如：

  symbolType: 'image',
  src: new RegularShape({
    fill: new Fill({color: 'red'}),
    stroke: new Stroke({color: 'black', width: 1}),
    points: 5,
    radius: 10,
    radius2: 4,
    angle: 0,
  }).getImage(10).toDataURL(),
  "size": ["/", 1000, ["resolution"]],