本文へ移動

Chizu地図

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

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

目次

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

zoomBox関数

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

The window a zoom step and a centre make.

Kept on the map: a centre near a coast would otherwise frame open sea. Clamping the window rather than the centre means a drag that runs off the edge simply stops there, which is what a reader expects of every other map they have used. On a map that wraps, east and west never stop, so only north and south are held. clamp is off for a fit: a region opened from its address asked for that region in the middle, and a clamp that pushes the window back onto the map puts it somewhere else.

インポート

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

定義

function zoomBox(map: Frameable, zoom: MapZoom, centre: { x: number; y: number; }, clamp?: boolean): MapBox

引数

名前型説明
mapFrameable

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

zoom1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

A valid zoom step from MAP_ZOOM_LEVELS.

centre{ x: number; y: number; }

The desired window centre in native map units.

clamp (省略可)boolean

Whether to hold a non-wrapping window inside its map canvas.

戻り値

MapBox

The window a zoom step and a centre make.

例

import WORLD from "@johnmorrisdotca/chizu/world";
import { zoomBox } from "@johnmorrisdotca/chizu";

console.log(zoomBox(WORLD, 2, { x: 500, y: 200 }));
// { x: 250, y: 77.75, width: 500, height: 244.5 }
{ x: 250, y: 77.75, width: 500, height: 244.5 }

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

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

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