如何在 OpenLayers 热图渐变中应用 alpha 颜色组件？

Question

下面的代码产生：

但是，我已指定两种颜色的 alpha 值为 0.3，但很明显已被忽略。

可以为热图梯度指定一个 alpha 值吗？如果是的话，怎么办？

我不仅希望能够看到热图下方的地图元素，而且希望在蓝色和黄色重叠的地方看到绿色。

当我应用模糊值时，会应用一些 Alpha 分量，但不会发生预期的颜色混合。

const osm = new ol.source.OSM();

osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);

//
// Heatmap A
//

const heatmapLayerA = new ol.layer.Heatmap({
  source: new ol.source.Vector(),
  blur: 0,
  radius: 20,
  zIndex: 10,
  weight: function (feature) {
    return feature.get("weight");
  }
});

const color = "hsla(60, 100%, 50%, 0.3)";
const gradient = [color, color];
heatmapLayerA.setGradient(gradient);

const coordinateA = [-77.0, 38.9];
const feature = new ol.Feature({
  geometry: new ol.geom.Point(coordinateA),
  weight: 1
});

heatmapLayerA.getSource().addFeature(feature);

//
// Heatmap B
//

const heatmapLayerB = new ol.layer.Heatmap({
  source: new ol.source.Vector(),
  blur: 0,
  radius: 20,
  zIndex: 10,
  weight: function (feature) {
    return feature.get("weight");
  }
});

const colorB = "hsla(240, 100%, 50%, 0.3)";
const gradientB = [colorB, colorB];
heatmapLayerB.setGradient(gradientB);

const coordinateB = [-77.0, 38.9001];
const featureB = new ol.Feature({
  geometry: new ol.geom.Point(coordinateB),
  weight: 1
});

heatmapLayerB.getSource().addFeature(featureB);

//
//
//

const tileLayer = new ol.layer.Tile({ source: osm });

const map = new ol.Map({
  target: "map",
  layers: [tileLayer, heatmapLayerA, heatmapLayerB],
  view: new ol.View({
    projection: "EPSG:4326",
    center: coordinateA,
    zoom: 18
  })
});

ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);

let visible = true;

#map {
  height: 512px;
  width: 512px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>

<div id="map"></div>

Answer 1

你是对的，只使用颜色的 RGB 分量，alpha 用于模糊。 您可以使用

ol.source.Raster

组合各层的输出，其中蓝色和黄色的 RGB 分量的简单混合会产生白色（如果您更喜欢 CMYK 混合产生绿色，您可以应用 https://stackoverflow.com 中的算法/a/62369367/10118270）

const osm = new ol.source.OSM();

osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);

//
// Heatmap A
//

const heatmapLayerA = new ol.layer.Heatmap({
  source: new ol.source.Vector(),
  blur: 0,
  radius: 20,
  zIndex: 10,
  weight: function (feature) {
    return feature.get("weight");
  }
});

const color = "hsla(60, 100%, 50%, 0.3)";
const gradient = [color, color];
heatmapLayerA.setGradient(gradient);

const coordinateA = [-77.0, 38.9];
const feature = new ol.Feature({
  geometry: new ol.geom.Point(coordinateA),
  weight: 1
});

heatmapLayerA.getSource().addFeature(feature);

//
// Heatmap B
//

const heatmapLayerB = new ol.layer.Heatmap({
  source: new ol.source.Vector(),
  blur: 0,
  radius: 20,
  zIndex: 10,
  weight: function (feature) {
    return feature.get("weight");
  }
});

const colorB = "hsla(240, 100%, 50%, 0.3)";
const gradientB = [colorB, colorB];
heatmapLayerB.setGradient(gradientB);

const coordinateB = [-77.0, 38.9001];
const featureB = new ol.Feature({
  geometry: new ol.geom.Point(coordinateB),
  weight: 1
});

heatmapLayerB.getSource().addFeature(featureB);

//
//
//

const tileLayer = new ol.layer.Tile({ source: osm });
const raster = new ol.layer.Image({
  source: new ol.source.Raster({
    sources: [heatmapLayerA, heatmapLayerB],
    operation: (pixels) => [
      Math.max(pixels[0][0], pixels[1][0]),
      Math.max(pixels[0][1], pixels[1][1]),
      Math.max(pixels[0][2], pixels[1][2]),
      Math.max(pixels[0][3], pixels[1][3]),
    ],
  })
});
const map = new ol.Map({
  target: "map",
  layers: [tileLayer, raster],
  view: new ol.View({
    projection: "EPSG:4326",
    center: coordinateA,
    zoom: 18
  })
});

ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);

let visible = true;

#map {
  height: 512px;
  width: 512px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>

<div id="map"></div>