Cannot read properties of undefined reading '_requestTransformFn

[helloqinsong]

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

[helloqinsong]

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

[kikitte]

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

MVTImageryProvider/example/src/index.js

Lines 16 to 22 in 34463f3

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

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

[Wanghongrong]

@kikitte 你好！我也是使用的示例代码进行加载，也存在该问题！
由于我使用的基础开发环境为Angular15，我的具体步骤为：
1、拷贝文件中的index.js mapbox-gl.js到 src/app下，
2、在app.component.ts中添加如下代码

3、将mapbox-basic-v8.js文件中export default{...}中文件拷贝至app.component.ts中，并添加如下变量const styles = {...}

4、运行代码，出现了上面的问题。
5、代码为最新拉取下来的。

[kikitte]

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

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

[Wanghongrong]

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

[kikitte]

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

[Wanghongrong]

@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

[kikitte]

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

[Wanghongrong]

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

[kikitte]

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

[Wanghongrong]

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

[hongfaqiu]

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