很多遊戲中 使用滑鼠滾輪來控制地圖的放大和縮小, 類似百度地圖的控制方式 

官方給的東西少之又少 只能自己動手解決!

實現效果和這個基本一致 

這個使用D3.js 實現的 我們需要用遊戲引擎實現,這個只能借鑑了

首先定義一些全域性變數

    private pic:Laya.Sprite = new Laya.Sprite; //代表地圖的圖片層
    private scale:number = 1; //放大的倍率 預設為1

    private bgX:number = 0; //地圖的x點的座標
    private bgY:number = 0; //地圖Y點的座標

    this.pic = new Laya.Sprite;
    this.pic.graphics.drawCircle(Laya.stage.width/2, Laya.stage.height/2, 35, "#00ffff");
    Laya.stage.addChild(this.pic);
 

開啟監聽事件

    Laya.stage.on(Laya.Event.MOUSE_WHEEL,this,this.mouseWheel)

    mouseWheel(e:Laya.Event){
        console.info(e)
        this.zoom(Laya.stage.mouseX,Laya.stage.mouseY,e.delta);
    }

  zoom(x:number,y:number,delta:number){

        let ns:number = this.scale;
        if(delta>0){
            ns += 0.05;
        }else{
            ns -= 0.05;
        }
        ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns);
        this.bgX = this.bgX - (x - this.bgX) * (ns - this.scale) / (this.scale);
        this.bgY = this.bgY - (y - this.bgY) * (ns - this.scale) / (this.scale);

        this.scale = ns;

        this.pic.pos(this.bgX,this.bgY);

        this.pic.scaleX = this.scale;
        this.pic.scaleY = this.scale;
    }
 

感謝大神們的 無私分享精神 願 LayaAir 這個高速引擎能夠越走越遠