本文へ移動

Chizu地図

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

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

目次

リファレンス · 操作できる地図

ChizuMount型

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

The mounted native map’s drawing updates, selected region, framing, loaded features and cleanup handle.

インポート

import type { ChizuMount } from "@johnmorrisdotca/chizu/mount";

定義

type ChizuMount = {
    set(patch: Partial<Omit<ChizuMountOptions, "map">>): void;
    setMap(map: ChizuMap): void;
    select(code: string | null): void;
    show(codes: readonly string[]): void;
    zoomBy(by: 1 | -1): void;
    reset(): void;
    view(): ChizuView;
    featureLayer(): ChizuFeatureLayer | null;
    destroy(): void;
};

メンバー

名前型説明
set(patch: Partial<Omit<ChizuMountOptions, "map">>): void

Change any of the options but map, and redraw.

setMap(map: ChizuMap): void

Show another map, from its whole.

select(code: string | null): void

Choose a region (or none), zooming to it unless fit is off.

show(codes: readonly string[]): void

Look at these regions, as close as will hold them all.

zoomBy(by: 1 | -1): void

One step in or out, about the middle of the window.

reset(): void

Back to the whole map.

view(): ChizuView

Where the map is looking now.

featureLayer(): ChizuFeatureLayer | null

The features of the map shown now, once they are here; null before, and for a map with none.

destroy(): void

Take it out of the page.

例

import WORLD from "@johnmorrisdotca/chizu/world";
import { mountChizu, type ChizuMount } from "@johnmorrisdotca/chizu/mount";

const mount: ChizuMount = mountChizu(document.querySelector<HTMLElement>("#map")!, { map: WORLD });
mount.select("FR");
mount.destroy();

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

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