自定义 TileLayer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const TintLayer = BaseTileLayer.createSubclass({
  // set up the properties specific to this layer
  properties: {
    // url to the tiles, provided by the application
    urlTemplate: null,
    // tint color that will be used to change
    // stamen's black and white tiles
    // value provided by the application
    tint: {
      value: null,
      type: Color
    }
  }

  // override necessary methods here
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const MyCustomTileLayer = BaseTileLayer.createSubclass({
  // properties of the custom tile layer
  properties: {
    urlTemplate: null
  },

  // override getTileUrl()
  // generate the tile url for a given level, row and column
  getTileUrl: function(level, row, col) {
    return this.urlTemplate
      .replace("{z}", level)
      .replace("{x}", col)
      .replace("{y}", row);
  }
});

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
38
39
40
41
42
43
44
45
46
47
48
// This method fetches tiles for the specified level and size.
// Override this method to process the data returned from the server.
fetchTile: function (level, row, col, options) {

  // call getTileUrl() method to construct the URL to tiles
  // for a given level, row and col provided by the LayerView
  const url = this.getTileUrl(level, row, col);

  // request for tiles based on the generated url
  // the signal option ensures that obsolete requests are aborted
  return geosceneRequest(url, {
    responseType: "image",
    signal: options && options.signal
  })
    .then(function (response) {
      // when esri request resolves successfully
      // get the image from the response
      const image = response.data;
      const width = this.tileInfo.size[0];
      const height = this.tileInfo.size[0];

      // create a canvas with 2D rendering context
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = width;
      canvas.height = height;

      // Apply the tint color provided by
      // by the application to the canvas
      if (this.tint) {
        // Get a CSS color string in rgba form
        // representing the tint Color instance.
        context.fillStyle = this.tint.toCss();
        context.fillRect(0, 0, width, height);

        // Applies "difference" blending operation between canvas
        // and steman tiles. Difference blending operation subtracts
        // the bottom layer (canvas) from the top layer (tiles) or the
        // other way round to always get a positive value.
        context.globalCompositeOperation = "difference";
      }

      // Draw the blended image onto the canvas.
      context.drawImage(image, 0, 0, width, height);

      return canvas;
    }.bind(this));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Create a new instance of the TintLayer and set its properties.
const stamenTonerLayer = new TintLayer({
  urlTemplate: "https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
  tint: "#71DE6E", // blue color
  title: "Stamen Toner"
});

const map = new Map({
  layers: [stamenTonerLayer]
});

const view = new SceneView({
  container: "viewDiv",
  map: map,
  center: [0, 30],
  zoom: 3
});