宝探しゲームのカスタマイズ方法

動作例

新規ステージ foo を作る場合:

1. uMapで宝の位置をマーカーで作る
2. JSON形式でダウンロードして data/foo.geojson に保存
3. 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でのゴールの作成

1. マーカーを置く
2. 「名称」に短い名前をつけ、「概要」に発見したときの文章を書く。
3. 複数のエリアを作るときは別々のレイヤにするとよい
4. (複数レイヤにした場合は同じエリアのマーカーだけを表示し)
   左側の共有ボタンから「GeoJSON形式」を選んでダウンロードする。

オフライン地図の作成

area.jsonで map に、地図画像ファイルを指定してPWAにローカルキャッシュさせると オフラインで遊べるようになる。

上記URL(boundsを求めるためのもの)を開き、上部のBボタンを押すと 画像保存モードになるので、ズームと境界を合わせてからPボタンを押す。 画像ファイルをPNGで保存して bounds= の値とともに area.json ファイルに登録する。

Tips

• マーカーを回転させるには divIcon の中にもう1つ別のclassの要素を作って そこだけで回転させる必要がある。