本文へ移動

Chizu地図

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

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

目次

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

CalloutSpot型

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

One numbered circle placed in open water, and the leader line that joins it to its region.

インポート

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

定義

type CalloutSpot = {
    code: string;
    number: number;
    start: [
        number,
        number
    ];
    circle: [
        number,
        number
    ];
    radius: number;
};

メンバー

名前型説明
codestring

The region it names.

numbernumber

Its number: where it was in the list asked for, from 1 (or its place from the west, with numbering: "west-to-east").

start[number, number]

Where its leader starts: a point on the region's own land, as drawn.

circle[number, number]

The circle's centre.

radiusnumber

The circle's radius, in the map's units.

例

import WORLD from "@johnmorrisdotca/chizu/world";
import { layoutCallouts, type CalloutSpot } from "@johnmorrisdotca/chizu";

const [first]: CalloutSpot[] = layoutCallouts(WORLD, { codes: ["JP"] });
console.log(first!.code, first!.number);
// JP 1
JP 1

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

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

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