(追記 2021/02/01)
OpenLayers v6 以降では地図の乗算合成が CSS で実装可能になりました。
この記事のコードは OpenLayers v5 以前でしか使えません。
v6 以降の実装方法については↓の記事をどうぞ
OpenLayers で地図をグレースケールにしたり乗算合成したり
https://qiita.com/cieloazul310/items/19de09ffdd3c1df8a396
普段GISやPhotoshopを使っている方ならWEB地図のレイヤーも乗算で合成したくなりますよね？
OpenLayers3では、canvasのglobalCompositeOperation属性を使って簡単に乗算合成ができます。
サンプル（地理院地図+色別標高図）
html
<div id="map" class="map"></div>
JavaScript
//色別標高図のレイヤーオブジェクトを作成
const relief = new ol.layer.Tile({source: new ol.source.XYZ({
url: "http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",
attributions: [
new ol.Attribution({html: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"})
],
minZoom:5,
maxZoom:15
}),
title: "色別標高図",
visible: true
});
//地理院地図のレイヤーオブジェクトを作成
var cjstd = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
attributions: [
new ol.Attribution({html: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"})
],
minZoom:5,
maxZoom:18
}),
title: "地理院地図",
visible: true
});
cjstd.on("precompose", function(evt){
evt.context.globalCompositeOperation = 'multiply';
});
cjstd.on("postcompose", function(evt){
evt.context.globalCompositeOperation = "source-over";
});
var map = new ol.Map({
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([140.4599, 36.3696]),
zoom: 14
}),
layers: [relief,cjstd]
});
OpenLayers3で地図を表示する一般的なコードに、
cjstd.on("precompose", function(evt){
evt.context.globalCompositeOperation = 'multiply';
});
cjstd.on("postcompose", function(evt){
evt.context.globalCompositeOperation = "source-over";
});
を付け足すだけで、乗算合成が可能になります。