🌍
3D 地球
基于 MapLibre GL JS,globe 投影,无 token、无第三方 key。地球可拖拽旋转、缩放,视觉接近原站体验。
下方为实际渲染效果。若当前环境不支持 WebGL,会自动降级为列表视图。
<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>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,
});<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