如何在 openlayers 中定义 webgl 点的大小？

Question

我使用 webgl 点图层创建了圆圈，但我不知道如何更改大小。我怎么做？基数 link：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 canvas 上绘制的东西的数据 URL，或者您可以使用 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"]],

如何在 openlayers 中定义 webgl 点的大小？

How to define size of a webgl-point in openlayers?

html

javascript

css

maps

openlayers