deck.glでマーカーを表示する
この記事はdeck.gl Advent Calendar 2021 参加記事です。
概要
地図ライブラリとしては基本的な機能であるマーカー表示ですが、deck.glにはマーカーという特別なオブジェクトは存在しないので、iconLayerを使用してマーカーを表示します。
サンプルコード
解説
iconLayerはポイントデータを読み込んでアイコンを表示するレイヤーですが、アイコン画像の縦幅や横幅、表示位置を正しく調整しないと位置がずれて表示されるので注意してください。
アイコン画像を設定するgetIconプロパティはアクセサになっているので、データの属性値を元に出力するアイコンを振り分けたりすることが可能です。
|
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 |
const icon_option = { marker: { url: "./img/marker.png", x: 0, //画像読み込みのX軸オフセット y: 0, //画像読み込みのY軸オフセット anchorY: 512, //Y軸の表示位置（通常画像の縦幅に合わせる） width: 512, //アイコン画像の横幅 height: 512, //アイコン画像の縦幅 mask: true //tureにするとアイコン画像の色の上塗りなどが可能になる }, camera: { url: "./img/camera.png", x: 0, //画像読み込みのX軸オフセット y: 0, //画像読み込みのY軸オフセット anchorY: 512, //Y軸の表示位置（通常画像の縦幅に合わせる） width: 512, //アイコン画像の横幅 height: 512, //アイコン画像の縦幅 mask: true //tureにするとアイコン画像の色の上塗りなどが可能になる } }; export function renderLayers(props) { const { data } = props; const iconLayer = new IconLayer({ id: "icon-layer", data: data.features, pickable: true, getIcon: (d) => { //属性値のtypeをみてアイコンを出し分ける return icon_option[d.properties.type]; }, sizeScale: 6, //アイコンのサイズはここで調整する getSize: 5, //個別にサイズを変化させたい場合はコールバックを設定する getColor: [0, 120, 0, 255], //マーカーカラーを上塗りする(mask有効時のみ) getPosition: (d) => d.geometry.coordinates, onClick: (d) => { //マーカークリック時の処理 console.log(d.object); } }); return [iconLayer]; } |
iconLayerに、ツールチップの表示やマウスカーソルの変更などを組み合わせることによって、一般的なマーカーの機能を実装することができます。
