UP | HOME

マウス操作のカスタマイズ

ここでは、StandardUIViewerのマウス操作をカスタマイズする例を示します。

1. JavaScriptファイル

import mapray from "@mapray/mapray-js";
import maprayui from "@mapray/ui";

const ACCESS_TOKEN = "MTU*************************************";


class CustomViewer extends maprayui.StandardUIViewer {
  onMouseDown( point, event ) {
    if ( event.shiftKey ) {
      const pickResult = this.viewer.pick(point);

      if ( pickResult.entity ) {
        console.log( "Entity: ", pickResult.entity );
      }
      else if (pickResult.point) {
        const pin = new mapray.PinEntity( this.viewer.scene );
        const p = new mapray.GeoPoint();
        p.setFromGocs( pickResult.point );
        pin.addMakiIconPin( "car-15", p );
        this.addEntity( pin );
      }
    }
    else {
      super.onMouseDown( point, event );
    }
  }
}


window.startApp = id => {
    new CustomViewer( id, ACCESS_TOKEN );
};

2. 実行結果

shiftを押しながらクリックするとピンが配置されます。

demo-mouse.png

shiftを押しながらピン上でクリックするとコンソールにクリックしたピンの情報が出力されます。

demo-mouse-dev.png

より詳細な例はデバッグ用コードをご参照ください。

3. 関連するAPI