[错误] 9.4 在页面缩放时,交错的 mapbox 完全失去同步
作者: kahole创建于 2026年9月12日更新于 2026年9月16日
标签bug
说明
升级到 Deck.gl 9.4 后,在互放模式下使用映射盒后,甲板.gl 实例似乎甚至不会在页面缩放事件发生时注册. 导致其余会场上完成缩放和取景口的去色.
参见:https://map-zoom-shift-issues.onrender.com/ 页面存档备份,存于互联网档案馆. (我还包含一个按钮,将母体的宽度更改为“ calc( 100%- 40px) ” , 从而完全消除了这个问题)
{\fn华文仿宋\fs16\1cHD1D1D1}
无回复( N)
• 预期行为
无回复( N)
- 重现步骤
- 装入应用程序
- " 缩放/缩放和 "
- 取景口完全不同步
整个应用程序源代码 :
导入“./index.css”;
导入“mapbox-gl/dist/mapbox-gl.cs”;
从“ react-dom” 导入 reactDOM ;
从“反应”中导入{使用状态};
从 “@deck.gl/layers” 导入 { scatterplotLayer } ;
从 “@deck.gl/mapbox” 导入{ Mapbox Overlay} ;
从“ react-map-gl/mapbox” 导入{映射,使用控制} ;
数据=[
{ pos: [800.0133149, 40.4554421]}, ,
{ pos: [8.01313149, 40.455421]}, ,
{ pos: [84. 0133149, 40.455421]}, , , ,
{ pos: [86. 0133149, 40.455421] }, , ,
{ pos: [88. 0133149, 40.4554421] }, ,
{ pos: [800.0133149, 42.4554421] },
{ pos: [-80.0133149, 44.4554421] },
{ pos: [800.0133149, 46.4554421]}, ,
{ pos: [80.0133149, 48.4554421]}, , ,
; ; ;
凸起层 = [
新建散点Layer( {
编号:"测试",
数据,
(d) 校长,
选取: 是真的,
不透明:1.0,
中风:是真的,
填充:对
半径比例: 6,
半径最小像素: 1,
半径 Max 像素: 1000,
线条WidthMin像素: 1,
得到拉迪乌斯:(d) ~ 10000,
获取FillColor:(d)
getLine Color: (d) => [0, 0],
~ , , ( ) ,
; ; ;
函数 Deck GLOverlay( 道具) {
cont overlay = 使用 Control ( ( ()) QQ 新的 Mapbox Overlay( 道具) );
覆盖. setProps(道具);
返回为无效;
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?
主函数 {
c. [已安装马金、已安装哈斯马金]=使用状态(假);
返回( ưμ㼯A
< div 数据
样式 QQ 宽度 : 有 Margin 吗 ? "calc (100% - 40px)" : "100%" , 高度 : 有 margin ? "calc (100% - 40px)" : "100%", 边距 : 0 QQ
> 翻译:
< 按钮
样式 QQ 字体 : “ 18px ” , 位置 : “绝对” , 上方 : 10; 左侧 : 10; zIndex :1 QQ
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}在Click\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}嘿嘿! {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}嘿嘿嘿嘿嘿嘿!
> 翻译:
转出 {has margin?" "Off" :"Off" } (当前宽度/ 高度父 div = {has margin?") "calc(100% - 40px)" :"100%")
</按钮 >
< 地图
初始视频状态 {}
经度: -80,
纬度: 40,
缩放: 5,
}}
mapstyle="mapbox://styles/mapbox/streets-v9" (中文(简体) ).
地图盒 AccessToken="XQREDAECID"
重用地图
拖动旋转% 1
触摸 Pitch 虚构
> 翻译:
< Deck GLOverlay 层- 层- 层- 相接 / >
</Map> (中文(简体) ).
</div> (中文(简体) ).
(三)
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?
Const App = () {{{
返回 < 主要 / > ;
* ;
reactDOM.create Root (document.get ElementById ("root"))). 收发(<App />);环境
- 框架版本:9.4
- 浏览器:Chrome
- OS:麦克奥斯
"@deck.gl/core":"9.4.0","eck".
"@deck.gl/扩展":"9.4.0",".
"(@deck.gl/layers)": (中文(简体) ).
. . . . . . .内容来源: visgl/deck.gl