OpenLayers3で地図を乗算合成する #JavaScript

(追記 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";
});

を付け足すだけで、乗算合成が可能になります。

OpenLayers3で地図を乗算合成する

サンプル（地理院地図+色別標高図）

html

JavaScript

参考