deck.glでマウスカーソルを変更する

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

deck.glで生成される地図は単一のcanvasに描画されるため、地図内の地物にホバーした際にマウスカーソルを変化させるにはdeck.glのonHoverイベントでハンドリングする必要があります。

サンプルコード

解説

deck.glコンポーネントでは、getCursorプロパティを用いることでcanvasにホバーした際のマウスカーソルを変更できます。 getCursorプロパティとonHoverプロパティを利用して特定のレイヤー上にホバーしたときのみマウスカーソルを変更する処理を追加します。

//カーソルステータス
const [cursor, setCursor] = useState("move");

//地物にマウスオーバーした際の処理
const hoverHandle = (d) => {
    //ホバー下にレイヤーが存在する場合はポインターに
    if (d.layer) {
        setCursor("pointer");
        /* //特定のレイヤーでのみ変更したい場合は、レイヤーidで判別する
        if(d.layer.id == "geojson-layer"){
          setCursor("crosshair");
        }
        */
    } else {
        //レイヤーが存在しない場合は移動カーソルに変更
        setCursor("move");
    }
};


return (
    <DeckGL
        getCursor={() => cursor}
        onHover={hoverHandle}
    />
)

//カーソルステータス

const [cursor, setCursor] = useState("move");

//地物にマウスオーバーした際の処理

const hoverHandle = (d) => {

//ホバー下にレイヤーが存在する場合はポインターに

if (d.layer) {

setCursor("pointer");

/* //特定のレイヤーでのみ変更したい場合は、レイヤーidで判別する

if(d.layer.id == "geojson-layer"){

setCursor("crosshair");

}

} else {

//レイヤーが存在しない場合は移動カーソルに変更

setCursor("move");

}

};

return (

<DeckGL

getCursor={() => cursor}

onHover={hoverHandle}

)

マウスカーソルのステータスを管理する変数を作成し、getCursorプロパティに渡します。（getCursorプロパティには必ずfunctionを渡す必要があります）

onHoverプロパティにホバー時に実行されるコールバックを設定します。

コールバックの中では、引数からレイヤーの有無やレイヤーIDを取得できるので、それらの情報を元にカーソルのステータスを変更します。

概要

サンプルコード

解説

投稿者: shimizu