From 2356843b77a60e6c0c7215053a426182fdc1ffe2 Mon Sep 17 00:00:00 2001 From: fengjun Date: Mon, 20 Apr 2026 16:06:22 +0800 Subject: [PATCH] up --- assets/js/map3d-loader.js | 10 +++++++-- assets/js/map3d.js | 45 ++++++++++++++++++++------------------- index.html | 11 +++++++--- 3 files changed, 39 insertions(+), 27 deletions(-) diff --git a/assets/js/map3d-loader.js b/assets/js/map3d-loader.js index eacb845..cbec69b 100644 --- a/assets/js/map3d-loader.js +++ b/assets/js/map3d-loader.js @@ -1,11 +1,17 @@ (function () { "use strict"; + var loaderScript = document.currentScript; + function supportsModuleScripts() { var script = document.createElement("script"); return "noModule" in script; } + function supportsImportMaps() { + return !!(window.HTMLScriptElement && HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")); + } + function supportsWebGL() { try { var canvas = document.createElement("canvas"); @@ -23,7 +29,7 @@ return; } - if (!supportsModuleScripts() || !supportsWebGL() || typeof Promise === "undefined" || typeof fetch === "undefined") { + if (!supportsModuleScripts() || !supportsImportMaps() || !supportsWebGL() || typeof Promise === "undefined" || typeof fetch === "undefined") { return; } @@ -31,7 +37,7 @@ script = document.createElement("script"); script.type = "module"; - script.src = "assets/js/map3d.js"; + script.src = loaderScript ? new URL("map3d.js", loaderScript.src).toString() : "assets/js/map3d.js"; script.onerror = function () { map.removeAttribute("data-map-module-loaded"); }; diff --git a/assets/js/map3d.js b/assets/js/map3d.js index fc3abfd..80fe7ae 100644 --- a/assets/js/map3d.js +++ b/assets/js/map3d.js @@ -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) { diff --git a/index.html b/index.html index 4bcdf51..f1ee9d2 100644 --- a/index.html +++ b/index.html @@ -44,9 +44,6 @@ position: relative; height: 600px; overflow: hidden; - border-radius: 24px; - background: radial-gradient(circle at top, rgba(25, 119, 255, 0.32), rgba(2, 12, 31, 0.92) 58%, rgba(2, 12, 31, 1) 100%); - box-shadow: 0 24px 80px rgba(2, 12, 31, 0.24); } #map .map-fallback { @@ -132,6 +129,14 @@ +