# StyleImageInterface

动态生成样式图像的界面。这是实现者建模的规范:它不是导出的方法或类。

可以为每一帧重新绘制实现此接口的图像。它们可用于动画图标和图案或使它们响应用户输入。样式图像可以实现 StyleImageInterface#render方法。该方法每帧调用一次,可用于更新图像。

# Properties

  • width number
  • height number
  • data ( Uint8Array| Uint8ClampedArray)

# Examples

var flashingSquare = {
    width: 64,
    height: 64,
    data: new Uint8Array(64 * 64 * 4),

    onAdd: function(map) {
        this.map = map;
    },

    render: function() {
        // keep repainting while the icon is on the map
        this.map.triggerRepaint();

        // alternate between black and white based on the time
        var value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;

        // check if image needs to be changed
        if (value !== this.previousValue) {
            this.previousValue = value;

            var bytesPerPixel = 4;
            for (var x = 0; x < this.width; x++) {
                for (var y = 0; y < this.height; y++) {
                    var offset = (y * this.width + x) * bytesPerPixel;
                    this.data[offset + 0] = value;
                    this.data[offset + 1] = value;
                    this.data[offset + 2] = value;
                    this.data[offset + 3] = 255;
                }
            }

            // return true to indicate that the image changed
            return true;
        }
    }
 }

 map.addImage('flashing_square', flashingSquare);
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

# render

在将使用图标的每一帧之前调用此方法一次。该方法可以选择data使用新图像更新图像的成员。

如果该方法更新图像,它必须返回true以提交更改。如果该方法返回false或什么都不返回,则假定图像未更改。

如果更新不频繁,使用Map#updateImage更新图像而不是实现此方法可能更容易。

如果此方法更新了图像,则返回。如果图像没有改变。boolean true``false

# onAdd

使用Map#addImage将图层添加到地图时调用的可选方法。

# Parameters

  • map **地图**此自定义图层刚刚添加到的地图。

# onRemove

使用Map#removeImage从地图中删除图标时调用的可选方法。这使图像有机会清理资源和事件侦听器。