1
2
3
4
5
6
7
8
9
const BlendLayer = BaseTileLayer.createSubclass({
// multiplyLayers stores tile layers// used as the basis for creating// a blend layer. Layers stored in this property// will be blended using "multiply" operation.properties: {
multiplyLayers: null }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const BlendLayer = BaseTileLayer.createSubclass({
properties: {
multiplyLayers: null },
// Called when the layer is added to the map// prior to it being rendered in the view.load: function() {
// iterate through each layer in multiplyLayers propertythis.multiplyLayers.forEach((layer) => {
// call load method on each layer and add as// a resolving promise of the custom layer.// The tile layers must load() prior to the BlendLayer// resolving and moving to the "loaded" status.this.addResolvingPromise(layer.load());
}, this);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Fetches the tile(s) visible in the viewfetchTile: function (level, row, col, options) {
const tilePromises = this.multiplyLayers.map((layer) => {
// calls fetchTile() on the tile layers returned in multiplyLayers property// for the tiles visible in the viewreturn layer.fetchTile(level, row, col, options);
});
return promiseUtils.eachAlways(tilePromises)
.then((results) => {
// Reject with abort error if the request was aborted.// It is expected that `fetchTile` will already have rejected with abort errors// in that case but those errors are caught by `eachAlways`, so we need to re-// throw itif (options && options.signal && options.signal.aborted) {
throw promiseUtils.createAbortError();
}
// create a canvasconst width = this.tileInfo.size[0];
const height = this.tileInfo.size[0];
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
// multiply - multiplies the numbers for each pixel of the top layer (nat geo)// with the corresponding pixel for the bottom layer (hillshade). context.globalCompositeOperation = "multiply";
results.forEach((result) => {
const image = result.value;
context.drawImage(image, 0, 0, width, height);
});
return canvas;
});
}