时间戳

首页 > 解决方案 > 如何在 openlayers 中定义 webgl 点的大小？

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

问题描述

我使用 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

标签： javascripthtmlcssmapsopenlayers

解决方案

它在示例中有效，尽管大小不会增加到缩放 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"]],

推荐阅读