本文へ移動

Chizu地図

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

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

目次

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

ChizuLocalShape型

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

One shape of a local map, in the canvas's units: an area (a closed outline, filled), a line (an open one) or a point. Its id is the Feature's id (or its properties.id, or f1, f2 in the order given); name and nameJa are its properties.name and properties.nameJa (or name:ja); type is properties.kind (water, building, pitch, green, road have a look of their own); classes are properties.class.

インポート

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

定義

type ChizuLocalShape = {
    id: string;
    kind: "area" | "line" | "point";
    path: string;
    bbox: [
        number,
        number,
        number,
        number
    ];
    centroid: [
        number,
        number
    ];
    name?: string;
    nameJa?: string;
    type?: string;
    classes: string[];
};

メンバー

名前型説明
idstring
kind"area" | "line" | "point"
pathstring

An area's closed outlines (M x,y L … Z, a ring each; a hole is a ring drawn with the even-odd rule) or a line's open ones; empty for a point.

bbox[number, number, number, number]

The box round it on the canvas: left, top, right, bottom.

centroid[number, number]

Its middle: an area's centre of mass, a line's half-way point, a point itself.

name (省略可)string | undefined
nameJa (省略可)string | undefined
type (省略可)string | undefined
classesstring[]

例

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

const gate = { type: "Feature", id: "gate", properties: { name: "North gate" }, geometry: { type: "Point", coordinates: [139.7006, 35.7007] } };
const shape: ChizuLocalShape = localMap({ centre: [139.7006, 35.7004], widthMetres: 200, data: gate }).shapes[0]!;
console.log(shape.id, shape.kind, shape.name, shape.centroid.map(Math.round));
// gate point North gate [ 500, 334 ]
gate point North gate [ 500, 334 ]

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

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

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