将热图元素的形状从圆形更改为方形

Question

我是Openlayer6的新手。谁能告诉我如何将Heatmap.js的渲染元素从圆形更改为方形？非常感谢！

Answer 1

这目前是不可配置的，尽管您可以覆盖Heatmap层的createRenderer方法来实现这一点(api不支持，因此它可能在未来中断(。

以下是一个工作示例：https://codesandbox.io/s/heatmap-earthquakes-squares-hdrbs?file=/main.js

这些是原始功能所需的更改：

diff --git a/src/ol/layer/Heatmap.js b/src/ol/layer/Heatmap.js
index c3e3306c8..2873bf184 100644
--- a/src/ol/layer/Heatmap.js
+++ b/src/ol/layer/Heatmap.js
@@ -222,8 +222,8 @@ class Heatmap extends VectorLayer {

void main(void) {
vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);
-          float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;
-          float value = (1.0 - sqrt(sqRadius)) * u_blurSlope;
+          float distance = max(abs(texCoord.x), abs(texCoord.y));
+          float value = (1.0 - distance) * u_blurSlope;
float alpha = smoothstep(0.0, 1.0, value) * v_weight;
gl_FragColor = vec4(alpha, alpha, alpha, alpha);
}`,
@@ -263,8 +263,8 @@ class Heatmap extends VectorLayer {

void main(void) {
vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);
-          float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;
-          float value = (1.0 - sqrt(sqRadius)) * u_blurSlope;
+          float distance = max(abs(texCoord.x), abs(texCoord.y));
+          float value = (1.0 - distance) * u_blurSlope;
float alpha = smoothstep(0.0, 1.0, value) * v_weight;
if (alpha < 0.05) {
discard;