微信小程序通过 web-view 引入 ArcGIS Maps SDK for JavaScript 初始化的 H5 界面报错,地图不展示

357 阅读2分钟

预期实现效果:

在微信小程序中想通过 web-view 引入一个 H5 页面,该页面中通过 ArcGIS Maps SDK for JavaScript 初始化了一张二维地图,并在其地图之上通过 FeatureLayer 添加了一个业务图层。预期是想将页面添加到微信小程序中,可以在小程序端预览和操作当前业务数据。

报错文案:

Uncaught TypeError: this._shaderModuleClass.inputs.findLast is not a function
at v.get vertexInput [as vertexInput] (mapViewDeps.js:983)
at v.get locations [as locations] (mapViewDeps.js:984)
at v.get renamedLocationsMap [as renamedLocationsMap] (mapViewDeps.js:986)
at v.getProgram (mapViewDeps.js:987)
at getProgram (mapViewDeps.js:954)
at F.submitDraw (mapViewDeps.js:530)
at d.render (mapViewDeps.js:1173)
at d.render (mapViewDeps.js:688)
at b.render (mapViewDeps.js:691)
at m._renderTile (FeatureLayerView2D.js:49)

报错截图:

QQ_1723762446636.png

解决方案:

上述报错其实仅仅在微信小程序端有报错,并且界面刚初始化完后会显示地图,但是地图会一闪而过,然后界面就只保留默认的缩放按钮不再展示地图。但是 H5 界面目前是正常运行的,没有任何问题。

详细查看报错信息,可以得到关键字 this._shaderModuleClass.inputs.findLast,这里面其实最关键的就是最后面的 findLast。这是一个 ECMAScript 2023 (ES14) 引入的新方法,它用于从数组的最后一个元素开始向前查找,返回第一个满足提供的测试函数的元素值。

所以问题原因就是此方法在较新的环境中可用,但在旧的环境中可能不可用。也就是说 H5 端没有问题是因为浏览器支持 ES 最新特性,但是在微信小程序端目前还没支持,所以要解决此问题只有两种方法:使用 polyfill、降低使用此方法的依赖库版本。

微信小程序端使用 polyfill 使其支持 ES 最新特性的方法可行,但是支持 ES14 这么新的新特性的话目前还没有一个好的解决方案(后续找到的话再补充)。

第二种方案就是降低依赖库版本。这个 findLast 方法其实是在 ArcGIS Maps SDK for JavaScript 最新版 4.30 中使用的,那我们直接将其版本降到 4.18 之后,问题得到解决。

QQ_1723763271113.png