本文へ移動

Chizu地図

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

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

目次

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

regionBox関数

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

A window tight on one region, for drawing it on its own.

Two things decide it, and getting either wrong draws a country instead of a shape. The room around the region is a fraction of that side of it, not of its longest side. And the window takes the shape of the frame it will be drawn in (aspect, how much wider than tall), because an SVG scaled to fit keeps its window's proportions and fills the rest of the frame with whatever is next to it. With both right the region fills the side that limits it, and the room left over falls on the other side, where it does what the room was for: the neighbours show in outline, so it is a place rather than a blob. Framed where it is drawn, so a region in an inset is framed there.

インポート

import { regionBox } from "@johnmorrisdotca/chizu";

定義

function regionBox(map: Frameable, code: string | number, aspect?: number): MapBox

引数

名前型説明
mapFrameable

The native map or map fields required by this signature; coordinates and region codes belong to its canvas.

codestring | number

The native region or country code; null clears a region selection where accepted.

aspect (省略可)number

The desired window width divided by its height.

戻り値

MapBox

A window tight on one region, for drawing it on its own.

例

import WORLD from "@johnmorrisdotca/chizu/world";
import { boxToViewBox, regionBox } from "@johnmorrisdotca/chizu";

const box = regionBox(WORLD, "IT", 4 / 3);
console.log((box.width / box.height).toFixed(3));
// 1.333
1.333

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

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

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