up

2026-04-20 16:06:22 +08:00
parent 9938e484bd
commit 2356843b77
3 changed files with 39 additions and 27 deletions
--- 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");
        };
--- 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) {
--- 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 @@
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
+                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"
+            }
+        }
+    </script>
 </head>

 <body>