【实战】Three.js 3D 地球 GlobeStream3D 飞线流转可视化（earth-flyline）

目录1.官网地址2.我的需求3.思路拆解4.实际展示3D的地球效果5.核心实现代码1.官网地址GlobeStream3D官网案例 https://globestream3d.netlify.app/reference/example/容易混淆earth-flyline和GlobeStream3D这里提前说明GlobeStream3D 就是 earth-flyline 项目。earth-flylinenpm 包名开发时 CDN 安装引入使用的包标识GlobeStream3D项目对外名称、官网展示名称 底层基于 Three.js 封装开箱即用不用手动处理球体、光照、着色器等复杂逻辑能快速实现 3D 地球、飞线动画、城市散点、柱体、文字标记这类地理数据可视化效果。2.我的需求基于该案例 实现 3d地图的飞线、流转、相关样式、数据流转等功能3.思路拆解3.1 通过cdn直接引入earthFlyline飞线地图3.2 加载世界地图相关的数据 我这里是之前自己注册了 world-geojson相关数据3.3 基于官网地址中的相关配置文档来一步步设置3D地球的主题、散点、标记等内容这里需要一定的echarts和three.js的基础以便于理解相关配置和光照、材料等概念4.实际展示3D的地球效果5.核心实现代码try { // 1. 加载并注册地图 (从内嵌数据读取,无需 fetch,支持 file:// 直接打开) const inlineEl document.getElementById(world-geojson); if (!inlineEl) throw new Error(未找到内嵌的地图数据 #world-geojson); const geojson JSON.parse(inlineEl.textContent); earthFlyline.registerMap(world, geojson); // 2. 初始化 3D 地球暗紫主题 参考示例配置 const chart earthFlyline.init({ dom: document.getElementById(container), map: world, autoRotate: true, rotateSpeed: 0.006, config: { R: 140, pixelRatio: Math.min(window.devicePixelRatio, 2), stopRotateByHover: true, bgStyle: { color: #0a0f1a, opacity: 1 }, // 深空蓝黑背景 earth: { color: #1a6b8a, // 海洋蓝绿色真实卫星风 material: MeshPhongMaterial, shininess: 5, // 数值越大反光越强、越亮默认约 30 specular: #ffffff, // 高光颜色白色为亮光黑色为无高光 }, mapStyle: { areaColor: #4c8b6a, // 陆地植被绿 lineColor: #aaccdd, opacity: 0.85, // 陆地略微透明让海洋色透出更自然 }, spriteStyle: { color: #ffd966, show: true }, // 城市标记暖金色 pathStyle: { color: #ffaa44, show: true }, // 飞线路径暖橙 flyLineStyle: { color: #ffaa44, duration: 2200, repeat: Infinity }, // 飞线本体暖橙 scatterStyle: { color: #66ccff, duration: 2000, repeat: Infinity }, // 涟漪亮蓝 barStyle: { color: #ff8866, width: 0.6, height: 0.5 }, // 柱体珊瑚红 hoverRegionStyle: { areaColor: #66ddaa, opacity: 0.85, show: true }, // 悬停高亮柔绿 enableZoom: true, zoom: 1, regions: { China: { areaColor: #3a7a5a }, // 中国区域可单独微调 }, light: AmbientLight, } }); // 3. 添加涟漪散点所有城市节点 const pointData CITY_KEYS.map((k, i) ({ id: i 1, lon: CITIES[k].lon, lat: CITIES[k].lat, })); chart.addData(point, pointData); // 4. 添加飞线数据流向 const flyLineData CONNECTIONS.map(([from, to], i) { const f CITIES[from], t CITIES[to]; return { from: { id: ${from}-${i}, lon: f.lon, lat: f.lat }, to: { id: ${to}-${i}, lon: t.lon, lat: t.lat }, style: { pathStyle: { color: #cd79ff, show: true }, flyLineStyle: { color: #cd79ff, duration: 2200 (i % 5) * 300, repeat: Infinity }, }, }; }); chart.addData(flyLine, flyLineData); // 5. 添加柱体城市活跃度 const barData CITY_KEYS.map((k) ({ position: { lon: CITIES[k].lon, lat: CITIES[k].lat }, value: CITIES[k].bar, })); chart.addData(bar, barData); // 6. 添加文字标记主要城市 const textMarkData CITY_KEYS.map((k) ({ text: CITIES[k].name, position: { lon: CITIES[k].lon, lat: CITIES[k].lat }, })); chart.setData(textMark, textMarkData); // 7. 更新统计 隐藏加载层 document.getElementById(stat-lines).textContent flyLineData.length; document.getElementById(stat-nodes).textContent pointData.length; document.getElementById(stat-bars).textContent barData.length; document.getElementById(loader).classList.add(hide); // 暴露实例便于调试 window.__chart chart; console.log(GlobeStream3D 初始化完成, { chart, flyLines: flyLineData.length, points: pointData.length }); } catch (err) { console.error(err); showError(3D 地球初始化失败请检查网络连接后刷新页面。, err?.stack || String(err)); }