Question

我目前正在开发一个显示amap的应用程序。您可以在地图上执行多项操作。地图可以变得非常大，因此用户需要一个较小的地图（Minimap）来跟踪整个地图。

目前有两个阶段。大地图的一个，小地图的一个。大地图包含多个图层，但只需要在小地图上显示其中一个图层（就像布局一样）。

所以我考虑为特定图层的AfterDrawing添加一个EventListener。

this.layoutLayer.afterDraw(this._initMinimap);

在事件监听器中，我正在执行以下操作：

//...
_initMinimap : function(event) {
    var ctrl = event;
    if (!this.minimap) {
        this.minimap = new Kinetic.Stage({
            container : 'container',
            width : 165,
            height : 165
        });
    }
    if (!this.mapLayer) {
        this.mapLayer = new Kinetic.Layer({});
    }
    this.mapLayer.clear();
    this.minimap.clear();
    this.layoutLayer.toImage({
        callback : function(img) {
            var image = new Kinetic.Image({
                image : img
            });
            image.setScale(0.01,0.01);
            ctrl.mapLayer.add(image);
        }
    });
    this.minimap.add(this.mapLayer);
    this.minimap.draw();
},
//...

有没有人知道如何解决这个问题？我对JavaScript并不熟悉，所以我不确定这是否是正确的方法。

提前致谢： - ）

Answer 1

您可以使用clone和scale获取图层的微缩副本：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Minimap Test</title>
    </head>
    <body>
        <div id="container"></div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.min.js"></script>
        <script>
            var squareQuantity = 10,
                tileWidth = window.innerWidth / squareQuantity,
                tileHeight = window.innerHeight / squareQuantity,
                background = new Kinetic.Layer,
                stage = new Kinetic.Stage({
                    width: window.innerWidth,
                    height: window.innerHeight,
                    container: 'container'
                });

            for ( var x = 0; x < squareQuantity; x++ ){
                for ( var y = 0; y < squareQuantity; y++ ){
                    background.add(
                        new Kinetic.Rect({
                            x: x * tileWidth,
                            y: y * tileHeight,
                            width: tileWidth,
                            height: tileHeight,
                            fill: '#' + Math.random().toString( 16 ).substring( 2, 8 )
                        })
                    )
                }
            }

            var mini = background.clone().scale({ x: 0.2, y: 0.2 });

            stage.add( background );
            stage.add( mini );

            background.draw();
        </script>
    </body>
</html>

Example

如何实现KineticJS Layer的Minimap？

1 个答案: