本文へ移動

Chizu地図

SVGの地図を描き、地域を表示範囲に収め、番号付きの注記や地理クイズを英語と日本語の名前で作れます。

「地図」は、土地や場所を図で表したものです。 名前について(英語)

目次

リファレンス · 表示範囲・形・クイズの道具

ChizuLocalCanvas型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

What a local map is made of: where, how big in metres, and how many metres a unit of its canvas is.

インポート

import type { ChizuLocalCanvas } from "@johnmorrisdotca/chizu";

定義

type ChizuLocalCanvas = {
    centre: readonly [
        number,
        number
    ];
    widthMetres: number;
    heightMetres?: number;
    metresPerUnit?: number;
};

メンバー

名前型説明
centrereadonly [number, number]

The middle of the canvas: longitude and latitude, in degrees.

widthMetresnumber

How wide the canvas is on the ground, in metres.

heightMetres (省略可)number | undefined

How tall it is on the ground, in metres. Default: as wide.

metresPerUnit (省略可)number | undefined

How many metres a unit of the canvas is, stated in the map's projection. Default: the longer side over 1,000, so a local canvas is 1,000 across like every other map's.

例

import { localMap, type ChizuLocalOptions } from "@johnmorrisdotca/chizu";

// A canvas 600 m across and 400 m tall, round Tokyo Station, one unit to the metre.
const options: ChizuLocalOptions = { centre: [139.7671, 35.6812], widthMetres: 600, heightMetres: 400, metresPerUnit: 1 };
console.log(localMap(options).viewBox);
// 0 0 600 400
0 0 600 400

出力(このページを作ったときに実行した結果)

ソースを見るGitHub で編集@johnmorrisdotca/chizu 1.5.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。