使用 OpenLayers WebGL 点层基于属性的旋转和偏移

Question

使用正常的矢量图层，我已经绘制了这样的定向天线符号：

基本上，这是一个有方向的点（以及水平光束宽度，但我们暂时先忘掉它）。这是我尝试在 OL 6.8.1 中使用 WebGLPoints 层重新创建的内容，但在创建正确样式时遇到问题。我可以旋转简单的三角形符号，但它们是重叠的，它们应该靠角接触：

我想问题的关键是设置一些偏移量，但这是我未能找到有效解决方案的地方。这是我目前使用的样式：

symbol: {
    symbolType: 'triangle',
    size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
    color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa'  ],
    rotateWithView: true,
    offset: [ 0,0 ],
    opacity: 0.4,
    rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}

（注意：如您所见，符号大小取决于缩放，我使用基于 'band' 属性的 2 种不同颜色并使用 'azy' 属性旋转它（这是所需的度数方向，从 N为0，顺时针））

旋转工作正常，但对于偏移，我需要一些帮助。我什至不确定它是否受到轮换的影响......提前致谢！如果您对使用 WebGL 的问题有任何其他解决方案，我也将不胜感激！

Answer 1

所以，这就是解决方案，感谢@Mike！诀窍是将偏移量乘以 -1，这样三角形的角就会接触。

symbol: {
    symbolType: 'triangle',
    size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
    color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa'  ],
    rotateWithView: false,
    offset: ['array', 0, ['*', ['interpolate', ['exponential', 2.5], ['zoom'], 6, 3, 20, 48], -1] ],
    opacity: 0.75,
    rotation: ['-', ['*', ['get','azy'] , 0.01745329251 ], 3.1415926],
}

注意：偏移量较小，只有一半大小的 2 个像素。一半大小，三角形没有接触，有几个像素的差距。它看起来像这样：

另一个解决方案是我创建了一个带有所需符号的 png：

请注意，图片的中心是切出扇区的圆心，因此旋转时，它将停留在旋转点上方。风格是：

symbol: {
    symbolType: 'image',
    src: 'tools/testbench/olmap2/cell_symbol.png',
    size: ['interpolate', ['exponential', 2.5], ['zoom'], 6, 10, 20, 100],
    color: ['case',["==", ['get','band'],2100], '#aa0000',["==", ['get','band'],3500], '#00aa00', '#0000aa'  ],
    rotateWithView: false,
    opacity: 0.75,
    rotation: ['*', ['get','azy'] , 0.01745329251 ]
},

结果是：

这有点慢，但我想 800x800px png 对此有点过头了，所以也许缩小它会解决性能问题 :) 这个解决方案的优点是我可以创建不同开口角度的圆段，所以也可以显示天线的（水平）波束宽度。使用三角形符号我无法做到这一点。 （如果以后我可以在 OL 中绘制自定义多边形，那将是完美的解决方案。）