自定义 BlendLayer

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 property
    this.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 view
fetchTile: 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 view
    return 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 it
      if (options && options.signal && options.signal.aborted) {
        throw promiseUtils.createAbortError();
      }
      // create a canvas
      const 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;
    });
  }