完整方案)
在使用 Geoscene / ArcGIS JS API 开发地图应用时经常会遇到一个问题❗字体资源依赖远程doc.geoscene.cn在内网或网络受限环境下无法加载最终导致✔ 点正常显示❌ 中文标注不显示❌ TextSymbol 无效 一、Node 批量下载字体核心思路 将远程 fonts 资源批量下载到本地/public/fonts 二、目标结构最终项目结构public/ fonts/ arial-unicode-ms-regular/0-255.pbf256-511.pbf...19968-20223.pbf⚙️ 三、Node 下载脚本完整可用 download-fonts.jsconstfsrequire(fs);constpathrequire(path);consthttpsrequire(https);// 字体 Unicode 区间精简中文覆盖constranges[0-255,256-511,512-767,768-1023,1024-1279,1280-1535,1536-1791,1792-2047,2048-2303,2304-2559,19968-20223,20224-20479,20480-20735,20736-20991,20992-21247];// 字体源 constbaseUrlhttps://doc.geoscene.cn/resources/fonts/arial-unicode-ms-regular/;// 输出目录 constoutDirpath.resolve(__dirname,public/fonts/arial-unicode-ms-regular);fs.mkdirSync(outDir,{recursive:true});// 下载函数带重试functiondownload(url,filePath,retry2){returnnewPromise((resolve){constfilefs.createWriteStream(filePath);https.get(url,(res){if(res.statusCode!200){console.log(❌ missing:,url);file.close();if(fs.existsSync(filePath))fs.unlinkSync(filePath);returnresolve(false);}res.pipe(file);file.on(finish,(){file.close();console.log(✔,path.basename(filePath));resolve(true);});}).on(error,async(){if(retry0){console.log( retry:,url);resolve(awaitdownload(url,filePath,retry-1));}else{console.log(❌ failed:,url);resolve(false);}});});}// 主流程 asyncfunctionrun(){console.log(\n Start downloading fonts...\n);letsuccess0;letfail[];for(constrofranges){consturl${baseUrl}${r}.pbf;constfilePathpath.join(outDir,${r}.pbf);constokawaitdownload(url,filePath);if(ok)success;elsefail.push(r);}console.log(\n);console.log( DOWNLOAD COMPLETE);console.log(✔ success:,success);console.log(❌ failed:,fail.length);if(fail.length){console.log(\n⚠ missing ranges:);console.log(fail);}console.log(\n output:,outDir);}run();▶️ 四、使用方法1️⃣ 放入项目根目录或者新建空文件夹执行下载之后将下载的文件拷贝到需要的地方。download-fonts.js2️⃣ 执行下载nodedownload-fonts.js3️⃣ 输出结果✔0-255.pbf ✔19968-20223.pbf...⚙️ 七、前端配置1️⃣ 设置 fontsUrlimportesriConfigfromgeoscene/config;esriConfig.fontsUrl/fonts;2️⃣ TextSymbol 使用importTextSymbolfromgeoscene/symbols/TextSymbol;constsymbolnewTextSymbol({text:朝阳区,color:black,font:{family:arial-unicode-ms-regular,size:12}}); 八、关键优化点✔ 1. 为什么要 Node 下载相比手动下载方式问题手动下载易漏文件浏览器点下载慢 不完整Node脚本✔ 自动化 可重复✔ 2. 为什么要分区间Geoscene 使用glyph 分片加载机制Unicode区间 → 对应 pbf 文件✔ 3. 必须包含中文区间19968–21247 ✔ 必须否则❌ 中文直接空白无报错 九、常见坑总结❌ 1. fontsUrl 没配esriConfig.fontsUrl/fonts;❌ 必须❌ 2. 少区间文件 表现中文部分缺字无报错❌ 3. 仍访问 doc.geoscene.cn 说明本地 fonts 没生效 十、总结Node 下载字体的核心价值 将 Geoscene 依赖的远程字体资源本地化最终实现✔ 离线可用✔ 中文完整显示✔ 不依赖 doc.geoscene.cn✔ 企业可部署