泉州自助建站,网页设计与制作介绍,工业设计专业介绍,培训机构优化目录 想要实现的效果实现过程踩坑安装依赖引入页面 想要实现的效果
示例地址 实现过程
踩坑 示例是通过script引入的依赖#xff0c;但本人需要在react项目中实现该效果。按照react-globe.gl官方方法引入总是报错 Cant import the named export AmbientLight from non EcmaS… 目录 想要实现的效果实现过程踩坑安装依赖引入页面 想要实现的效果
示例地址 实现过程
踩坑 示例是通过script引入的依赖但本人需要在react项目中实现该效果。按照react-globe.gl官方方法引入总是报错 Cant import the named export AmbientLight from non EcmaScript module (only default export is available)。原因是通过import Globe from react-globe.gl;引入的是.mjs文件react-globe.gl.mjs。尝试各种方法都失败最终通过改为引入.js文件import Globe from ../../node_modules/react-globe.gl/dist/react-globe.gl.min;成功。 安装依赖
package.json版本 react-globe.gl: ^2.27.0,satellite.js: ^5.0.0,three: ^0.157.0,three-globe: ^2.30.0,web-vitals: ^2.1.4引入页面
import React, { Component, useState, useEffect, useRef, useMemo } from react;
import Globe from ../../node_modules/react-globe.gl/dist/react-globe.gl.min;
import * as THREE from three;
import * as satellite from satellite.js;function World() {const w window.screen.width * 0.5;const h (window.screen.height - 80) * 0.7;const EARTH_RADIUS_KM 6371; // kmconst SAT_SIZE 80; // kmconst TIME_STEP 3 * 1000; // per frameconst globeEl useRef();const [satData, setSatData] useState();const [globeRadius, setGlobeRadius] useState();const [time, setTime] useState(new Date());useEffect(() {// time ticker(function frameTicker() {requestAnimationFrame(frameTicker);setTime((time) new Date(time TIME_STEP));})();}, []);useEffect(() {// load satellite datafetch(//unpkg.com/globe.gl/example/datasets/space-track-leo.txt).then((r) r.text()).then((rawData) {const tleData rawData.replace(/\r/g, ).split(/\n(?[^12])/).filter((d) d).map((tle) tle.split(\n));const satData tleData.map(([name, ...tle]) ({satrec: satellite.twoline2satrec(...tle),name: name.trim().replace(/^0 /, ),}))// exclude those that cant be propagated.filter((d) !!satellite.propagate(d.satrec, new Date()).position).slice(0, 1500);setSatData(satData);});}, []);const objectsData useMemo(() {if (!satData) return [];// Update satellite positionsconst gmst satellite.gstime(time);return satData.map((d) {const eci satellite.propagate(d.satrec, time);if (eci.position) {const gdPos satellite.eciToGeodetic(eci.position, gmst);const lat satellite.radiansToDegrees(gdPos.latitude);const lng satellite.radiansToDegrees(gdPos.longitude);const alt gdPos.height / EARTH_RADIUS_KM;return { ...d, lat, lng, alt };}return d;});}, [satData, time]);const satObject useMemo(() {if (!globeRadius) return undefined;const satGeometry new THREE.OctahedronGeometry((SAT_SIZE * globeRadius) / EARTH_RADIUS_KM / 2,0);const satMaterial new THREE.MeshLambertMaterial({color: palegreen,transparent: true,opacity: 0.7,});return new THREE.Mesh(satGeometry, satMaterial);}, [globeRadius]);useEffect(() {setGlobeRadius(globeEl.current.getGlobeRadius());globeEl.current.pointOfView({ altitude: 3.5 });}, []);return (div idglobeViz classNamemap_bgGlobewidth{w}height{h}backgroundColorrgba(0,0,0,0)ref{globeEl}globeImageUrl//unpkg.com/three-globe/example/img/earth-blue-marble.jpgobjectsData{objectsData}objectLabelnameobjectLatlatobjectLnglngobjectAltitudealtobjectFacesSurface{false}objectThreeObject{satObject}//div);
}class App extends Component {...render() {return (...World /...)}
}export default App;
