コンテンツにスキップ

マウス操作

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

マウス操作をカスタマイズするには、マウスのクリックや移動を検知し、それに合わせて独自の処理をすることになります。 検知には StandardUIViewer のマウスイベントを override します。

StandardUIViewerのイベント

イベント 内容
onMouseDown マウスボタンが押された時に発生
onMouseMove マウスが移動した時に発生
onMouseUp マウスボタンが離された時に発生
onMouseWheel マウスホイールが回転した時に発生

サンプルソース

onMouseDown を override し、マウスボタンが押された時に mapray.Viewer.pick() の結果である PickResult を参照して位置を求め、そこに PinEntity を配置します。

Info

Mapray JSには提供方法で複数のバージョンがあります。 Latest VersionではAccess Tokenを簡単に利用できるAPIを準備しているため、そちらのAPIの利用をおすすめしていますので、 Local Latest Versionにサンプルを掲載します。

バージョン 提供方法 アクセス方法 備考
0.9.6 CDN / npm packages API Key 実装がシンプルなため、本ドキュメントでは主にこの形で説明
0.10.x以上 ローカル配布（利用は要問い合わせ） / Github packages Access Token APIにより簡単かつセキュアに利用可能。ローカル配布版で説明を行うが、package版でも利用可能 
 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
49
50
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./v0.10.0/mapray.min.js"></script>
        <script src="./v0.10.0/maprayui.min.js"></script>
        <link rel="stylesheet" href="./mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // Set up your access token, which can be created in Mapray Cloud.
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
        });

    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.position) {
                    const pin = new mapray.PinEntity( this.viewer.scene );
                    const p = new mapray.GeoPoint();
                    p.setFromGocs( pickResult.position );
                    pin.addMakiIconPin( "car-15", p );
                    this.addEntity( pin );
                }
            }
            else {
                super.onMouseDown( point, event );
            }
        }
    }

    const uiviewer = new CustomViewer( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。

 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
    <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // Set up your apikey, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";

    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.position) {
                    const pin = new mapray.PinEntity( this.viewer.scene );
                    const p = new mapray.GeoPoint();
                    p.setFromGocs( pickResult.position );
                    pin.addMakiIconPin( "car-15", p );
                    this.addEntity( pin );
                }
            }
            else {
                super.onMouseDown( point, event );
            }
        }
    }

    const uiviewer = new CustomViewer( "mapray-container", apikey);
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。

 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
import mapray from "@mapray/mapray-js";
import maprayui from "@mapray/ui";

// Set up your apikey, which can be created in Mapray Cloud.
const apikey = "<YOUR_MAPRAY_API_KEY>";

window.startApp = id => {
    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.position) {
                const pin = new mapray.PinEntity( this.viewer.scene );
                const p = new mapray.GeoPoint();
                p.setFromGocs( pickResult.position );
                pin.addMakiIconPin( "car-15", p );
                this.addEntity( pin );
                }
            }
            else {
                super.onMouseDown( point, event );
            }
        }
    }

    new CustomViewer( id, apikey);
};

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。

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

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