地球の上の都市名

<chikyu-earth-realistic> と <chikyu-space> は、地球の上の都市を表示できます。各都市の場所に小さな点を置き、その横に名前を出します。都市のデータは kuni (@johnmorrisdotca/kuni/cities) から読み込みます。kuni は任意の peer 依存で、city-names が設定されたときだけ、地球が画面で大きくなるのに合わせて一段ずつ読み込みます。使わないページに負担はかからず、地球を小さく表示するページが読み込むのは首都だけです。

<chikyu-earth-realistic city-names lang="ja" style="width: 420px"></chikyu-earth-realistic>

名前は人口の多い都市が優先されます。国の首都は人口に200万人、そのほかの政府所在地は100万人、州や県などの行政区の中心都市は10万人を加えて数えるので、小さな首都が大都市のそばで埋もれることはありません。ほかの名前に重なる名前や、絵からはみ出す名前は出さず、代わりに次の都市を試します。

• 地球が大きいほど増えます。 段は、地球が画面でどれだけ大きいか (半径のピクセル数) で決まります。半径60ピクセルから首都、170ピクセルから首都以外で人口100万以上の都市、420ピクセルから人口10万以上の都市を出します。拡大すると、それぞれの段が最初に必要になったときに読み込まれ、名前が入る場所も増えます。縮小すると、細かい段の都市は名前が出なくなります。いちばん細かい段 (人口1万5千以上) は使いません。kuni の一覧のうちダウンロードがいちばん大きく、すべての名前は表示しきれないからです。
• 裏側の都市は出しません。 都市は、見ている人のほうを向いているときだけ名前が出ます。地球の縁に近すぎる都市 (地平線から約7度未満) も出しません。宇宙の見た目では、カメラのほうを向いているかで判定するので、月が都市の前を横切っても名前は隠れません。
• 名前は重なりません。 それぞれの名前は、点の右、左、上、下の順に置ける場所を試し、大きい都市から先に置きます。空いている場所がなければ出しません。目印の名前と同じ規則です。都市の名前は、それより先に置かれる場所の名前と目印、輪を付けた衛星、目印 (attachMarkers) のラベルも避けるので、都市の名前がそれらを覆うことはありません。
• ページの言語。 英語のページでは英語、日本語のページ (要素の lang、なければページの言語) では、kuni に日本語名があればそれを出します。日本語名がない都市は英語で出します。kuni の日本語名は行政上の名前です (東京なら東京都)。kuni が短い形 (name.jaShort) を持つ都市では、短い形を出します。
• 見た目。 プロパティ cityNamesStyle で、font、size (ピクセル)、weight、colour、halo (文字の縁取り)、haloWidth、dot (点の色)、dotSize (点の半径、ピクセル) のどれでも指定できます。これらは CSS カスタムプロパティ (--chikyu-city-font、--chikyu-city-size など) としても、要素に CSS で指定できます。
• 止まっているときは何もしません。 名前は、絵を描くとき (視点が動いたとき、大きさが変わったとき、設定や言語が変わったとき、段が読み込まれたとき) だけ計算します。描き直すのはこのレイヤーだけで、絵は描き直しません。stats.cityNames に on、max、radius (画面での地球の半径)、tiers (読み込んだ段)、cities、names、renders があります。
• インストールされていないとき。 kuni (バージョン1.6.1以降) がなければ、理由を添えた chikyu-city-names-unavailable イベントが送られ、名前は描かれません。

純粋な計算の部分は、ブラウザーがなくても使えます。@johnmorrisdotca/chikyu-earth/realistic の layoutCities、cityTiersFor、cityRank、cityNameText、readCityNames を使うと、場所が画面のどこに来るかを答えられる視点であれば、どんなものにも名前を配置できます。

海と大陸の名前

sea-names を <chikyu-earth>、<chikyu-earth-realistic>、<chikyu-space> に付けると、画面の地球が小さいあいだは大洋と大陸の名前を出し、半径が 280 ピクセル以上になると海や湾も出します。付けない限り出ません。開いた水面の名前は、ページが求めたときだけ出すためです。属性だけを書くと付きます。プロパティは seaNames です。水の名前は文字のあいだを空けて書きます。都市の名前が先に置かれ、1つしか入らない場所は都市が使います。止まっているあいだは描き直しません。

import { SEA_RADIUS, seaNamesFor } from "@johnmorrisdotca/chikyu-earth/realistic";

console.log(seaNamesFor(120).some((one) => one.id === "pacific-ocean"));
console.log(seaNamesFor(120).some((one) => one.id === "sea-of-japan"));
console.log(SEA_RADIUS);

true
false
280