Skip to content

足迹地球把足迹变成 3D 地球

无 token、开源、可嵌入。5 分钟把你的旅行与居住地变成可交互的地球。

效果 ​

下方为实际渲染效果。若当前环境不支持 WebGL,会自动降级为列表视图。

三步开始 ​

html
<script type="module" src="https://cdn.jsdelivr.net/npm/@footprint-studio/web-component@1/dist/auto.js"></script>

<footprint-globe
  data-src="./my-pins.json"
  height="480px"
  legend="true">
</footprint-globe>
ts
import { FootprintGlobe } from 'footprint-globe';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'footprint-globe/dist/footprint-globe.css';

const globe = new FootprintGlobe(document.getElementById('globe')!, {
  config: myConfig,
  maplibre: maplibregl,
});
html
<iframe
  src="https://embed.footprint-studio.dev/?src=https://example.com/pins.json&height=480"
  width="100%"
  height="480"
  style="border:0;border-radius:12px"
  loading="lazy"
  title="我的足迹">
</iframe>

下一步 ​

许可 ​

MIT © 2025 Footprint Studio

由 Footprint Studio 维护 · MIT Licensed