本文へ移動

Chizu地図

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

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

目次

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

ChizuGeoJson型

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

GeoJSON as the engine reads it: a Feature, a FeatureCollection, or a bare geometry, in the loose shape JSON.parse and an imported .json file give (type is any string, and is checked as the data is read). Points, MultiPoints, LineStrings, MultiLineStrings, Polygons, MultiPolygons and GeometryCollections are drawn; coordinates are [longitude, latitude] in degrees, a third number (height) is ignored.

インポート

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

定義

type ChizuGeoJson = {
    type: string;
    id?: string | number;
    properties?: Readonly<Record<string, unknown>> | null;
    geometry?: ChizuGeoJson | null;
    geometries?: readonly ChizuGeoJson[];
    features?: readonly ChizuGeoJson[];
    coordinates?: unknown;
};

メンバー

名前型説明
typestring
id (省略可)string | number | undefined
properties (省略可)Readonly<Record<string, unknown>> | null | undefined
geometry (省略可)ChizuGeoJson | null | undefined
geometries (省略可)readonly ChizuGeoJson[] | undefined
features (省略可)readonly ChizuGeoJson[] | undefined
coordinates (省略可)unknown

例

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

const pitch: ChizuGeoJson = {
  type: "Feature",
  id: "pitch",
  properties: { name: "Pitch", kind: "pitch" },
  geometry: { type: "Polygon", coordinates: [[[139.7, 35.7], [139.7012, 35.7], [139.7012, 35.7008], [139.7, 35.7008], [139.7, 35.7]]] },
};
console.log(localMap({ centre: [139.7006, 35.7004], widthMetres: 200, data: pitch }).shapes.map((shape) => shape.kind));
// [ 'area' ]
[ 'area' ]

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

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

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