宝探しゲームのカスタマイズ方法
動作例
新規ステージ foo を作る場合:
- uMapで宝の位置をマーカーで作る
- JSON形式でダウンロードして data/foo.geojson に保存
- area.jsonを編集して新規のエントリを追加する:
name: にエリア名を入れる。 geojson: 'data/foo.geojson' にする。
bounds: に地図のスクロール限界を入れる。
map: には "osm" (OpenStreetMapの場合)または、 "gsi" (地理院地図の場合)を入れる。
boundsを求めるには https://www.yatex.org/gitbucket/LeafletGo/2022-yuuji-TwinMapWithImage/pages/asahi.html の左の地図でズームと境界を合わせ、右クリックする。
uMapでのゴールの作成
- マーカーを置く
- 「名称」に短い名前をつけ、「概要」に発見したときの文章を書く。
- 複数のエリアを作るときは別々のレイヤにするとよい
- (複数レイヤにした場合は同じエリアのマーカーだけを表示し)
左側の共有ボタンから「GeoJSON形式」を選んでダウンロードする。
オフライン地図の作成
area.jsonで map に、地図画像ファイルを指定してPWAにローカルキャッシュさせると オフラインで遊べるようになる。
上記URL(boundsを求めるためのもの)を開き、上部の[B]ボタンを押すと 画像保存モードになるので、ズームと境界を合わせてから[P]ボタンを押す。 画像ファイルをPNGで保存して bounds= の値とともに area.json ファイルに登録する。
Tips
- マーカーを回転させるには divIcon の中にもう1つ別のclassの要素を作って そこだけで回転させる必要がある。 *