地球地球 地球
一个线条绘制的地球仪,以地球自身的速度旋转,并以你所在的位置为中心打开。
国家轮廓采用与Hako Devices和Uchusen Rockets相同的细线风格:一个正字法圆盘,在其上绘制的国家和边缘。一个SVG,没有画布。
一分钟
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 |
style | line 或者 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的共享视图控件。