本文へ移動

Chizu地図

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

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

目次

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

ChizuPlace型

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

The part of a region the engine reads, so a map of your own regions needs no more than these.

インポート

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

定義

type ChizuPlace = Pick<ChizuRegion, "code" | "path" | "bbox" | "centroid" | "neighbors" | "group">;

メンバー

名前型説明
codestring

Its code within its map: an ISO 3166-1 alpha-2 code on the world (JP), the postal or ISO 3166-2 part on a country (ON), the prefecture number in Japan (13).

pathstring

Its outline, M x,y L x,y … Z with one piece for each part (islands are pieces), on the map's canvas.

bbox[number, number, number, number]

The box round all of it.

centroid[number, number]

The middle of it, which falls in the sea when the place is a chain or a crescent: landAnchor finds a point on its land.

neighborsstring[]

The codes of the regions that share a border point with it, in order.

groupstring

What kind of region it sits among, for choosing look-alikes: a continent on the world, a larger part of the country on a country's map.

例

import { findQuestion, seededRandom, type ChizuPlace } from "@johnmorrisdotca/chizu";

// Three places of your own, drawn on a canvas 100 wide: the engine needs no more than these fields.
const square = (code: string, x: number): ChizuPlace => ({
  code,
  path: `M${x},0L${x + 30},0L${x + 30},30L${x},30Z`,
  bbox: [x, 0, x + 30, 30],
  centroid: [x + 15, 15],
  neighbors: [],
  group: "squares",
});
const places = [square("a", 0), square("b", 35), square("c", 70)];
console.log(findQuestion({ width: 100, height: 30, regions: places.map((place) => ({ ...place, name: place.code })) }, "b", seededRandom(1), { count: 2 })?.choices.length);
// 3
3

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

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

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