如何在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"]],