1. SuperMap iClient 10i 在 IE11 里到底卡在哪如果你正在维护政企内网、能源调度、国土巡查这类项目大概率绕不开 IE11。SuperMap iClient 10i for JavaScript 本身功能没问题但它的iclient-ol.js里用了 ES6 的Promise、Object.assign、Array.from这些 APIIE11 的 JScript 引擎一个都不认。表现就是页面白屏、地图容器空白、控制台报SCRIPT5009: Promise 未定义或者对象不支持“assign”属性或方法。我试过最直接的修法就是引入babel-polyfill或core-js做垫片让 IE11 先具备 ES6 运行时的基础能力再加载 iClient。但光解决语法兼容还不够——很多团队在联调阶段还会遇到另一个问题地图底图能出来可一旦调用超图之外的 AI 能力比如地址解析、POI 语义检索、路径规划的自然语言输入Key 就散落在各个 JS 文件里IE11 下fetch又不支持跨域和鉴权一起爆。所以这篇要解决的是两件事叠在一起IE11 的 ES6 垫片 TaoToken 统一 Key 的配置骨架。前者让 iClient 10i 能跑后者让后续所有模型调用走同一个入口不用在每个页面里硬编码密钥。适合正在做内网 GIS 系统、需要兼容老浏览器、又想接入大模型能力的开发者。下面直接给可复制的配置和验证步骤。2. 前置准备TaoToken 统一 Key 与 API 通道TaoToken 在这里的角色是一个统一的模型调用入口。你不需要在 IE11 项目里分别对接多家模型的 SDK只要拿一个 Key通过兼容的 HTTP 请求就能调用对话、代码、语义理解等能力。对 IE11 场景特别友好的一点是它走标准 HTTPS 接口你可以用XMLHttpRequest封装不依赖fetch。先到控制台创建 Key注册/登录后进入控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite在 API Keys 页面新建一个 Keyhttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档请求格式、模型名、返回结构https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteAPI 基地址统一用https://taotoken.net/api注意这个地址不带任何查询参数。Key 建议放在单独的config.js里不要写进iclient-ol.js或业务逻辑文件方便后续换环境和做灰度。注意IE11 不支持fetch和Promise所以调用 TaoToken 的请求要用XMLHttpRequest包一层并且这个封装要放在 polyfill 之后、业务代码之前。3. 可复制的 config 配置骨架下面这套骨架分三层polyfill 加载层、TaoToken 配置层、iClient 初始化层。目录结构建议这样放project/ libs/ babel-polyfill.min.js iclient-ol.js ol.js config/ taotoken.config.js js/ request.js map-init.js index.html3.1 taotoken.config.js// config/taotoken.config.js // 统一 Key 配置IE11 下用 var 声明避免 let/const 报错 var TAOTOKEN_CONFIG { baseUrl: https://taotoken.net/api, apiKey: sk-你的Key替换这里, model: gpt-4o-mini, timeout: 30000 }; // 兼容 IE11 的 XHR 请求封装不依赖 fetch / Promise function taoRequest(path, payload, onSuccess, onError) { var xhr new XMLHttpRequest(); xhr.open(POST, TAOTOKEN_CONFIG.baseUrl path, true); xhr.setRequestHeader(Content-Type, application/json); xhr.setRequestHeader(Authorization, Bearer TAOTOKEN_CONFIG.apiKey); xhr.timeout TAOTOKEN_CONFIG.timeout; xhr.onreadystatechange function () { if (xhr.readyState ! 4) return; if (xhr.status 200 xhr.status 300) { var res JSON.parse(xhr.responseText); onSuccess onSuccess(res); } else { onError onError(xhr.status, xhr.responseText); } }; xhr.ontimeout function () { onError onError(timeout, 请求超时); }; xhr.send(JSON.stringify(payload)); }这里刻意用var和回调不用async/await因为 IE11 对生成器函数和async完全不支持即使有 polyfill 也容易在压缩后出问题。3.2 index.html 的加载顺序顺序错了会直接白屏这是最常见的坑!DOCTYPE html html head meta charsetutf-8 meta http-equivX-UA-Compatible contentIEedge titleSuperMap iClient 10i IE11 兼容/title link relstylesheet hreflibs/iclient-ol.css /head body div idmap stylewidth:100%;height:600px;/div !-- 1. 先加载 polyfill必须在所有业务脚本之前 -- script srclibs/babel-polyfill.min.js/script !-- 2. 再加载 OpenLayers 和 iClient -- script srclibs/ol.js/script script srclibs/iclient-ol.js/script !-- 3. 最后加载配置和业务 -- script srcconfig/taotoken.config.js/script script srcjs/map-init.js/script /body /htmlX-UA-Compatible这行必须放在head最前面否则 IE11 可能用兼容模式渲染地图控件会错位。3.3 map-init.js 初始化与调用// js/map-init.js var map new ol.Map({ target: map, layers: [ new ol.layer.Tile({ source: new ol.source.TileSuperMapRest({ url: http://你的超图服务地址/iserver/services/map-china400/rest/maps/China, crossOrigin: anonymous }) }) ], view: new ol.View({ center: [0, 0], zoom: 3 }) }); // 地图加载完成后调用 TaoToken 做一次语义解析示例 map.once(postrender, function () { taoRequest(/chat/completions, { model: TAOTOKEN_CONFIG.model, messages: [ { role: user, content: 把“北京市海淀区”转成经纬度坐标 } ] }, function (res) { console.log(TaoToken 返回, res); }, function (code, msg) { console.error(调用失败, code, msg); }); });4. 验证请求与成功结果配置写完后按这个顺序验证能快速定位是兼容问题还是 Key 问题。第一步单独验证 polyfill 是否生效。在 IE11 控制台输入typeof Promise返回function说明垫片加载成功。如果返回undefined检查babel-polyfill.min.js路径和加载顺序。第二步验证 iClient 是否初始化。控制台输入typeof ol和typeof SuperMap都应有返回。地图容器里能看到底图瓦片说明 10i 在 IE11 下已经跑通。第三步验证 TaoToken 通道。在控制台手动执行一次请求taoRequest(/chat/completions, { model: gpt-4o-mini, messages: [{ role: user, content: ping }] }, function (res) { console.log(成功, res.choices[0].message.content); }, function (code, msg) { console.log(失败, code, msg); });成功时控制台会打印模型返回内容Network 面板能看到https://taotoken.net/api/chat/completions返回 200。如果返回 401是 Key 没带对返回 404检查baseUrl有没有多写斜杠。想先在浏览器里直接体验模型对话效果可以用模型对话页https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite5. 本篇常见错误排查报错Promise 未定义polyfill 没加载或加载顺序在 iClient 之后。把babel-polyfill.min.js提到所有脚本最前面。报错对象不支持“assign”属性或方法说明用的 polyfill 版本太老只补了 Promise 没补 Object。换成完整的babel-polyfill或core-js3的 stable 版本。地图容器空白但无报错多半是X-UA-Compatible没生效IE11 进了兼容模式。确认它位于head第一行且DOCTYPE是!DOCTYPE html。TaoToken 请求返回 0 或跨域IE11 对 CORS 支持有限确认请求地址是 HTTPS且没有在XHR里设置 IE 不认的自定义头。Authorization是标准头没问题但不要加X-Requested-With之外的非标准头。Key 泄露风险不要把 Key 写进iclient-ol.js或提交到公开仓库。用config/taotoken.config.js单独管理并在.gitignore里排除。压缩后报错如果用了 UglifyJS注意它默认不支持 ES6。要么用uglify-es要么在压缩前就把代码转成 ES5。IE11 项目建议直接用 Babel 转译后再压缩。6. 后续接入与长期编码建议基础链路跑通后如果你只是偶尔调用模型做语义解析用上面的taoRequest封装就够了。但如果要在 GIS 项目里长期做地址标准化、POI 语义匹配、路径描述生成这类功能建议把调用逻辑抽成独立的 service 层并考虑用 Coding Plan 来管理多模型切换和额度https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite接入文档里有完整的请求参数和返回字段说明遇到模型名或参数问题直接查这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite最后提醒一句IE11 的调试工具很弱建议在taoRequest里保留console.log输出上线前再用条件编译去掉。地图初始化和模型调用分开验证能省掉大量排查时间。