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

10
assets/js/map3d-loader.js
View File

@@ -1,11 +1,17 @@
(function () { (function () {
"use strict"; "use strict";
var loaderScript = document.currentScript;
function supportsModuleScripts() { function supportsModuleScripts() {
var script = document.createElement("script"); var script = document.createElement("script");
return "noModule" in script; return "noModule" in script;
} }
function supportsImportMaps() {
return !!(window.HTMLScriptElement && HTMLScriptElement.supports && HTMLScriptElement.supports("importmap"));
}
function supportsWebGL() { function supportsWebGL() {
try { try {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
@@ -23,7 +29,7 @@
return; return;
} }
if (!supportsModuleScripts() || !supportsWebGL() || typeof Promise === "undefined" || typeof fetch === "undefined") { if (!supportsModuleScripts() || !supportsImportMaps() || !supportsWebGL() || typeof Promise === "undefined" || typeof fetch === "undefined") {
return; return;
} }
@@ -31,7 +37,7 @@
script = document.createElement("script"); script = document.createElement("script");
script.type = "module"; 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 () { script.onerror = function () {
map.removeAttribute("data-map-module-loaded"); map.removeAttribute("data-map-module-loaded");
}; };

45
assets/js/map3d.js
View File

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

11
index.html
View File

@@ -44,9 +44,6 @@
position: relative; position: relative;
height: 600px; height: 600px;
overflow: hidden; 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 { #map .map-fallback {
@@ -132,6 +129,14 @@
<script src="assets/js/html5shiv.min.js"></script> <script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script> <script src="assets/js/respond.min.js"></script>
<![endif]--> <![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> </head>
<body> <body>