fengjun/ag-index
1
0
Fork 0
Code Activity

up

Browse Source
This commit is contained in:
fengjun
2026-04-20 16:06:22 +08:00
parent 9938e484bd
commit 2356843b77
3 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/js/map3d.js
View File

@@ -3,6 +3,9 @@
* 通过 IntersectionObserver 触发加载，避免阻塞首屏渲染
*/
const GEO_DATA_URL = new URL("../100000_full.json", import.meta.url).toString();
const THREE_CDN_BASE = "https://cdn.jsdelivr.net/npm/three@0.180.0";
let mapInitialized = false;
async function initMap3D(geoDataPromise = null, threeJSPromise = null) {
@@ -14,8 +17,8 @@ async function initMap3D(geoDataPromise = null, threeJSPromise = null) {
// 使用预加载的模块或动态导入
const threeModule = threeJSPromise
? (await threeJSPromise) ? (await import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js')) : null
: await import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js');
? (await threeJSPromise) ? (await import(THREE_CDN_BASE + '/build/three.module.js')) : null
: await import(THREE_CDN_BASE + '/build/three.module.js');
const THREE = threeModule.default || threeModule;
@@ -27,18 +30,18 @@ async function initMap3D(geoDataPromise = null, threeJSPromise = null) {
{ LineGeometry }
] = threeJSPromise && (await threeJSPromise)
? [
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
await import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
await import(THREE_CDN_BASE + '/examples/jsm/controls/OrbitControls.js'),
await import(THREE_CDN_BASE + '/examples/jsm/renderers/CSS2DRenderer.js'),
await import(THREE_CDN_BASE + '/examples/jsm/lines/Line2.js'),
await import(THREE_CDN_BASE + '/examples/jsm/lines/LineMaterial.js'),
await import(THREE_CDN_BASE + '/examples/jsm/lines/LineGeometry.js')
]
: await Promise.all([
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
import(THREE_CDN_BASE + '/examples/jsm/controls/OrbitControls.js'),
import(THREE_CDN_BASE + '/examples/jsm/renderers/CSS2DRenderer.js'),
import(THREE_CDN_BASE + '/examples/jsm/lines/Line2.js'),
import(THREE_CDN_BASE + '/examples/jsm/lines/LineMaterial.js'),
import(THREE_CDN_BASE + '/examples/jsm/lines/LineGeometry.js')
]);
const scene = new THREE.Scene();
@@ -370,9 +373,8 @@ async function initMap3D(geoDataPromise = null, threeJSPromise = null) {
};
// 加载 GeoJSON 数据（使用预加载或重新加载）
const url = "/assets/100000_full.json";
try {
const data = geoDataPromise ? await geoDataPromise : await (await fetch(url)).json();
const data = geoDataPromise ? await geoDataPromise : await (await fetch(GEO_DATA_URL)).json();
if (!data) throw new Error("No data available");
const map = createMap(data, 0.05);
map.add(createPulseRings(data, 0.05));
@@ -390,9 +392,8 @@ function setupLazyMap() {
// 预加载 GeoJSON 数据
const preloadGeoData = async () => {
const url = "/assets/100000_full.json";
try {
const res = await fetch(url);
const res = await fetch(GEO_DATA_URL);
return await res.json();
} catch (err) {
console.error("Failed to preload map data:", err);
@@ -404,12 +405,12 @@ function setupLazyMap() {
const preloadThreeJS = async () => {
try {
await Promise.all([
import('https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/controls/OrbitControls.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/renderers/CSS2DRenderer.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/Line2.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineMaterial.js'),
import('https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/lines/LineGeometry.js')
import(THREE_CDN_BASE + '/build/three.module.js'),
import(THREE_CDN_BASE + '/examples/jsm/controls/OrbitControls.js'),
import(THREE_CDN_BASE + '/examples/jsm/renderers/CSS2DRenderer.js'),
import(THREE_CDN_BASE + '/examples/jsm/lines/Line2.js'),
import(THREE_CDN_BASE + '/examples/jsm/lines/LineMaterial.js'),
import(THREE_CDN_BASE + '/examples/jsm/lines/LineGeometry.js')
]);
return true;
} catch (err) {