@johnmorrisdotca/chikyu-earth

中文文档
0.2.0发布于 2026/11/01MITTypeScriptES Module

地球千球:一个有国家轮廓的线条地球仪,它以地球自己的速度旋转,并以你所在的地方为中心打开。国家代码和名称来自kuni;轮廓是自然地球,用3d -geo绘制。SVG,没有画布。

中文使用文档
文档目录5 节
  1. 一分钟
  2. 画一个作为字符串
  3. 的元素
  4. 的数据
  5. 其余的

地球地球 地球

一个线条绘制的地球仪,以地球自身的速度旋转,并以你所在的位置为中心打开。
国家轮廓采用与Hako Devices和Uchusen Rockets相同的细线风格:一个正字法圆盘,在其上绘制的国家和边缘。一个SVG,没有画布。

CI MIT licence TypeScript

一分钟

npm install @johnmorrisdotca/chikyu-earth
<script type="module">
  import "@johnmorrisdotca/kazoku-ui/view-controls/define";
  import "@johnmorrisdotca/chikyu-earth/element";
</script>

<div id="globe" tabindex="0">
  <chikyu-earth size="420"></chikyu-earth>
</div>
<kazoku-view-controls id="controls" for="globe" address tilt-max="90" speed="0.004178" autoplay></kazoku-view-controls>

<script type="module">
  const earth = document.querySelector("chikyu-earth");
  document.getElementById("controls").addEventListener("kazoku-viewchange", (event) => {
    earth.setView(event.detail, event.detail.final);
  });
</script>

地球仪出现了,以读者为中心(浏览器询问他们的位置;直到他们回答,如果他们回答。 下降,它开始于格林威治子午线)。共享的控制条可以转动、倾斜、缩放和平移它。Auto-turn 以地球自身的速度运动 0.004178 度每秒,一个恒星日- 23小时56分4.0905秒-每转一圈。

你自己来处理吧:

<chikyu-earth center="139.7,35.7" style="thick" graticule></chikyu-earth>

画一个作为字符串

globe() 返回SVG标记,因此服务器,构建步骤或测试可以在没有DOM的情况下绘制相同的球体:

import { globe } from "@johnmorrisdotca/chikyu-earth";

const svg = globe({ size: 320, rotation: [-139.7, -35.7], style: "line" });

旋转是三维几何对 rotate 需要: [-longitude, -latitude] 中心在那个地方。里面的帮手 rotate.ts 时间数学- SIDEREAL_DAY_MS, spinAt(ms), centreRotation(point) 和 rotationAt(centre, now, start).

的元素

属性它是做什么的默认的
size正方形SVG的宽度和高度,以像素为单位。320
center"longitude,latitude" 以…为中心胜过地理位置。读者的位置,否则 0,0
styleline 或者 thick.line
graticule在国家下面画一个小格子。从

setView(view, final = true) 应用共享控制器 { yaw, tilt, zoom, panX, panY }. 每次呼叫都会更新 的状态;通过 final: false 在一个手势和 final: true 完整的 投影重绘。 projectionView(centre, size, view) 是相同的映射作为一个纯函数:偏航是添加到 家园经度,倾斜从纬度中减去,缩放乘以尺度,平移抵消平移。 因此,前面是家庭中心;Fit是1x,没有pan。

的数据

全球绘制的每个国家都包含在包中,在构建时就已写入-在运行时不会获取任何内容。 大纲是 自然地球(公共领域),每个都有其英文和日文名称和ISO α -2代码 kuni. COUNTRIES 是GeoJSON,和 countryList() 只是名称和代码:

import { countryList } from "@johnmorrisdotca/chikyu-earth";

countryList().find((c) => c.alpha2 === "JP"); // { name: "Japan", ja: "日本", alpha2: "JP" }

要在Natural Earth或kuni更新后刷新轮廓,请运行 pnpm countries 和提交 src/data/countries.ts.

其余的

CONTRIBUTING.md · 文档/ · NOTICE.md · CHANGELOG.md ·MIT许可。三维地理投影;kazoku-ui的共享视图控件。

版本与发布记录

@johnmorrisdotca/chikyu-earth 共发布 2 个版本,首次发布于 2026/11/01;过去 12 个月发布了 2 个版本。

版本发布日期距今
0.2.0latest2026/11/011 天前
0.0.0-stage2026/11/011 天前

关于 @johnmorrisdotca/chikyu-earth 的常见问题

@johnmorrisdotca/chikyu-earth 是什么?

地球千球:一个有国家轮廓的线条地球仪,它以地球自己的速度旋转,并以你所在的地方为中心打开。国家代码和名称来自kuni;轮廓是自然地球,用3d -geo绘制。SVG,没有画布。

如何安装 @johnmorrisdotca/chikyu-earth?

在项目目录运行 npm install @johnmorrisdotca/chikyu-earth,或使用 pnpm add / yarn add / bun add。

@johnmorrisdotca/chikyu-earth 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@johnmorrisdotca/chikyu-earth 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@johnmorrisdotca/chikyu-earth 需要什么版本的 Node.js?

package.json 的 engines 字段要求 Node.js >=24。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。

@johnmorrisdotca/chikyu-earth 可以商用吗?

@johnmorrisdotca/chikyu-earth 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@johnmorrisdotca/chikyu-earth 还在维护吗?

最新版本 0.2.0 发布于 2026/11/01(1 天前);至今共发布 2 个版本,其中过去 12 个月发布了 2 个;首次发布于 2026/11/01。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。