kikitte/MVTImageryProvider

Cannot read properties of undefined reading '_requestTransformFn

Closed this issue · 12 comments

requestTransformFn这是什么意思,有什么作用

我这里报错,用的数据是示例的数据
image

仓库提供的example里没能复现这个错误,但确实没有给requestTransformFn提供良好的说明,该函数用于拦截瓦片请求并修改url或者header,可参考

const provider = new MVTImageryProvider({
style: maplibreStyle,
requestTransformFn: (url) => {
console.log('request tile at: ' + url);
return {url: url, headers: {'Accept-Language': 'zh-cn'}, credentials: ''};
}
});

建议可以更新最新的版本试试,如果错误仍然存在,请提供一下代码示例以便排查

@kikitte 你好!我也是使用的示例代码进行加载,也存在该问题!
由于我使用的基础开发环境为Angular15,我的具体步骤为:
1、拷贝文件中的index.js mapbox-gl.js到 src/app下,
2、在app.component.ts中添加如下代码
微信截图_20230321120304
3、将mapbox-basic-v8.js文件中export default{...}中文件拷贝至app.component.ts中,并添加如下变量const styles = {...}
2
4、运行代码,出现了上面的问题。
5、代码为最新拉取下来的。

@Wanghongrong 感谢您提供的如此详细的描述。经过我的再次检测,仓库里提供的代码可以正常运行,没有出现_requestTransformFn报错,这里也提供一个基于webpack构建的可以正常运行例子。example.zip

我猜想可能是因为 Angular对经打包好的mapbox-gl.js进行了一些处理才导致的错误(但是不确定,所以这里的讨论仍然是实验性质),可以参考#18 这个问题里面提到的处理方法。如果问题仍然存在,烦请您提供一个可以复现的Angular工程(一个可以复现问题的最小代码示例即可)。

@kikitte 你好!
仓库中的代码是可以运行的。但是当我将他移植到Angular环境下,确实出现了该问题,测试的Angular工程详细见附件!
s3mplugin-test.zip

@Wanghongrong 请参考#18 中的解决办法。

@kikitte 已参照#18的解决办法处理,仍有该问题。
具体步骤为:
1、将mapbox-gl.js的export.modules更改为window.Mapbox
2、将index.js中的new Mapbox.BasicRenderer(...),更改为new window.Mapbox.BasicRenderer(...)
3、将index.js中的Mapbox.accessToken更改为window.Mapbox.accessToken

@Wanghongrong #18 中提及的一个关键点是通过script标签引用mapbox-gl.js,如此便没问题。
image

@kikitte 你好,我已按照上面的要求更改了响应的代码,将mapbox-gl.js进行引入,但还是报错,具体截图如下:
image

@Wanghongrong Hello, 这是一个
可以运行的例子,基于您提供的s3m-plugin-test.zip,希望可以帮助到您。
s3mplugin-test.tar.gz
mapbox-gl.tar.gz

@kikitte 感谢,现在他可以运行了。

@kikitte 修改Mapbox Vector Tile Basic JS Renderer,将_transformRequest改为箭头函数重新打包就可以了,commonjs的类在转换成esm时this需要强制绑定,或者使用箭头函数明确this指向
hongfaqiu/Mapbox-vector-tiles-basic-js-renderer@fa8666c#diff-34e7fbdc82f0cc7e8c4d7916c5b2d9fd5703944f7212cc2520ec568329323f83R62-R66