Map draw

🇯🇵| 🇺🇸

tl;dr

• 震度分布図のpng画像を生成する

💻使い方

インストール

必要なもの

• Node.js
• yarn

今回上記2つのインストール方法は割愛する。

# yarn, nodeはインストールされている状態とする
cd map-draw
yarn

# 実行（例）
node src/mapping.js -i test/example/example_1.json -o hoge.svg -c config/config.json

• --input, -i
  • 震源地、各地の震度の情報（json形式）
  • フォーマットの解説はこちら
• --output, -o
  • 生成後のファイルの保存先
• --config, -c
  • コンフィグのパス

フォント

• Arial（configで変更できます。）

📒細かい設定

生成する画像サイズや倍率、色の変更は

config/config.json

で、設定します。

フォーマット

• width
  • 生成する画像の横幅。Pixel
• height
  • 生成する画像の縦幅。Pixel
• scale
  • 倍率。桁が大きくなるほど拡大されます。
  • 拡大率が低い場合、自動的に解像度が低くなります。
• resolution
  • 地図の解像度。
  • 値が大きいほど荒くなります。
• stroke_width
  • 地図の線の太さ。
• sea_color
  • 海の色。
  • デフォルトは、 #1a1a1a
• land_color
  • 陸の色。
  • デフォルトは、 #595959
• stroke_color
  • 線の色。
  • デフォルトは、 #ffffff
• map
  • 使用するgeojsonファイルのパス。
• seismic_intensity_color
  • 各震度の色
  • 詳しくはこちら
• epicenter
  • color
    • 震源地の色
    • デフォルトは、 #d10026
  • size
    • 震源地に表示されるXマークの対照の線の長さ。
  • stroke_width
    • 震源地に表示されるXマークのストロークの横幅。
• seismic_intensity
  • circle
    • 震度の円の半径。
  • fontsize
    • 震度の数字のフォントサイズ。
  • height
    • 震度の文字と円がずれるため調整用。値が大きくなるごとに文字が下へずれます。
  • width
    • 震度の文字と円がずれるため調整用。値が大きくなるごとに文字が右へずれます。
  • font
    • フォント。デバイスにインストールされたフォントを指定してください。
• copyright
  • text
    • コピーライト文。配列として複数出力できます。フォントにより日本語を正しく表示できない場合があるので注意してください。
  • size
    • コピーライトのサイズ。
  • color
    • コピーライトの色。
    • デフォルトは、 #c9c9c9
  • font
    • フォント。デバイスにインストールされたフォントを指定してください。

📄入力するファイルの形式

.jsonで記述をします。

{
    "epicenter": [
        経度, 緯度
    ],
    "areas": {
        "震度": [
          [経度, 緯度],
          [経度, 緯度]
          ...
        ]
        ...
    }
}

• epicenter

  • 震源地の経度、緯度を指定します。

  • 必ず最初に経度が来るようにしてください。

  • 例:

    "epicenter": [
        139.752273,
        35.684350
    ]

• areas

  • 各地ごとの震度

    • 震度表記は0, 1, 2, 3, 4, under_5, over_5, under_6, over_6, 7で記述してください。詳しくはこちら

  • 例:

    押して展開

     "areas": {
        "4": [
            [
                144.3778,
                42.9867
            ],
            [
                143.8317,
                42.9050
            ],
            [
                145.5856,
                43.3309
            ],
        ],
        "3": [
            [
                143.2121,
                42.9226
            ],
            [
                143.9037,
                43.8181
            ],
            [
                143.6154,
                43.7885
            ],
            [
                143.9069,
                43.9726
            ],
            [
                144.1070,
                43.8238
            ],
            [
                144.6707,
                43.9115
            ],
        ]

サンプルコード

• test/example/example_1.json
• test/example/example_2.json
• test/example/example_3.json
• test/example/example_4.json
• test/example/example_5.json
• test/example/example_6.json
• test/example/example_7.json
• test/example/example_8.json
• test/example/example_9.json
• test/example/example_10.json

SVGからpngに変換する

node src convert -i [input file path] -o [output file path]

• --input, -i
  • SVG形式のファイルのパス
• --output, -o
  • 生成後のpngファイルの保存先のパス

🎨震度色とJsonの記述フォーマット

Jsonでの呼び名	名前	色
0	震度0	#d9d9d9
1	震度1	#2d1fcc
2	震度2	#3b93db
3	震度3	#67e071
4	震度4	#e2eb38
under_5	震度5弱	#e38227
over_5	震度5強	#e38227
under_6	震度6弱	#e81c2d
over_6	震度6強	#e81c2d
7	震度7	#db1d95

🙇謝辞

以下の記事を参考にさせていただきました。ありがとうございます。

• 気象庁防災情報XMLとD3.jsを使って地震の震度分布図を作る
• d3.js + jsdomで国土地理院のベクトルタイルからSVGファイルを生成

色調は、特務機関NERV防災を参考にさせていただきました。ありがとうございます。

⚖ライセンス

MITライセンス下で公開しています。

使用している日本地図は国土交通省国土地理院の地球地図日本をgeojsonフォーマットに変換して使用しています。