Edited at

OpenLayers3で地図を乗算合成する

More than 1 year has passed since last update.

普段GISやPhotoshopを使っている方ならWEB地図のレイヤーも乗算で合成したくなりますよね?

OpenLayers3では、canvasのglobalCompositeOperation属性を使って簡単に乗算合成ができます。


サンプル(地理院地図+色別標高図)

デモページ


html

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


JavaScript

//色別標高図のレイヤーオブジェクトを作成

var 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";
});

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


参考