我是 reactjs 和 deckGL 的新手，我对下面的代码有一点问题。我正在尝试使用 FlyToInterpolator 添加 DeckGL 以使标记居中。单击按钮后，我收到此错误，但是当我使用 react-map-gl + FlyToInterpolator 时，它可以工作。
更新：问题是，我在deckGL 中使用FlyToInterpolar API 时遇到问题，但在react-map-gl 中使用FlyToInterpolar 没有问题。
请帮忙！非常感谢 p/s：抱歉英语不是我的主要语言。
错误：
Error: failed to invert matrix
▶ 3 stack frames were collapsed.
Mapbox._updateMapViewport
src/mapbox/mapbox.js:434
431 | newViewState.altitude !== oldViewState.altitude;
432 |
433 | if (viewportChanged) {
> 434 | this._map.jumpTo(this._viewStateToMapboxProps(newViewState));
| ^ 435 |
436 | // TODO - jumpTo doesn't handle altitude
437 | if (newViewState.altitude !== oldViewState.altitude) {
View compiled
Mapbox._update
src/mapbox/mapbox.js:400
397 | newProps = Object.assign({}, this.props, newProps);
398 | checkPropTypes(newProps, 'Mapbox');
399 |
> 400 | const viewportChanged = this._updateMapViewport(oldProps, newProps);
| ^ 401 | const sizeChanged = this._updateMapSize(oldProps, newProps);
402 |
403 | if (!newProps.asyncRender && (viewportChanged || sizeChanged)) {
View compiled
Mapbox.setProps
src/mapbox/mapbox.js:213
210 | }
211 |
212 | setProps(props: Props) {
> 213 | this._update(this.props, props);
| ^ 214 | return this;
215 | }
216 |
View compiled
StaticMap._updateMapProps
src/components/static-map.js:213
210 | if (!this._mapbox) {
211 | return;
212 | }
> 213 | this._mapbox.setProps(
| ^ 214 | Object.assign({}, props, {
215 | width: this._width,
216 | height: this._height
View compiled
StaticMap.componentDidUpdate
src/components/static-map.js:152
149 | componentDidUpdate(prevProps: StaticMapProps) {
150 | if (this._mapbox) {
151 | this._updateMapStyle(prevProps, this.props);
> 152 | this._updateMapProps(this.props);
| ^ 153 | }
154 | }
155 |
View compiled
▶ 19 stack frames were collapsed.
DeckGL._customRender
src/deckgl.js:148
145 | // Viewports have changed, update children props first.
146 | // This will delay the Deck canvas redraw till after React update (in componentDidUpdate)
147 | // so that the canvas does not get rendered before the child components update.
> 148 | this.forceUpdate();
| ^ 149 | } else {
150 | this._redrawDeck();
151 | }
View compiled
Deck.redraw
src/lib/deck.js:351
348 |
349 | this.stats.get('Redraw Count').incrementCount();
350 | if (this.props._customRender) {
> 351 | this.props._customRender(redrawReason);
| ^ 352 | } else {
353 | this._drawLayers(redrawReason);
354 | }
View compiled
Deck._onRenderFrame
src/lib/deck.js:707
704 | this._pickAndCallback();
705 |
706 | // Redraw if necessary
> 707 | this.redraw(false);
| ^ 708 |
709 | // Update viewport transition if needed
710 | // Note: this can trigger `onViewStateChange`, and affect layers
View compiled
AnimationLoop.onRender
src/lib/animation-loop.js:252
249 | }
250 |
251 | onRender(...args) {
> 252 | return this.props.onRender(...args);
| ^ 253 | }
254 |
255 | onFinalize(...args) {
View compiled
AnimationLoop._renderFrame
src/lib/animation-loop.js:340
337 | }
338 |
339 | // call callback
> 340 | this.onRender(...args);
| ^ 341 | // end callback
342 | }
343 |
View compiled
AnimationLoop.redraw
src/lib/animation-loop.js:178
175 | this._setupFrame();
176 | this._updateCallbackData();
177 |
> 178 | this._renderFrame(this.animationProps);
| ^ 179 |
180 | // clear needsRedraw flag
181 | this._clearNeedsRedraw();
View compiled
renderFrame
src/lib/animation-loop.js:279
276 | if (!this._running) {
277 | return;
278 | }
> 279 | this.redraw();
| ^ 280 | this._animationFrameId = this._requestAnimationFrame(renderFrame);
281 | };
282 |
View compiled
代码：
const MAPBOX_TOKEN = // Set your mapbox token here
const useStyles = makeStyles({
box: {
borderStyle: "solid",
position: "absolute",
top: 0,
right: 0,
left: 0,
bottom: 0,
zIndex: -1
},
})
const MapHooks = forwardRef((props, ref) => {
const [fleetDetail, setFleetDetail] = useState(null)
const [mapRef, setMapRef] = useState(null);
const classes = useStyles()
const sigfox = ApiSigfox()
const [mapping, setMapping] = useState({
width: '100%',
height: '100%',
longitude: -73.989308,
latitude: 40.741895,
zoom: 12
});
useImperativeHandle(ref, () => ({
_goToNYC(e) {
Object.values(sigfox).map((docs) => {
return (e === docs.device) ? (
updateMap(docs)
) : null
})
}
}));
//update Map
function updateMap(test){
console.log(test.device + '-' + 'updateMap')
const viewport = {
...mapping,
longitude: test.lon,
latitude: test.lat,
zoom: 14,
transitionDuration: 2000,
transitionInterpolator: new FlyToInterpolator(),
transitionEasing: d3.easeCubic
};
setMapping(viewport)
console.log(mapping)
}
return (
<div className={classes.box} style={{borderStyle: "solid"}}>
<DeckGL viewState={mapping} controller={true} onViewStateChange={setMapping}>
<StaticMap
mapStyle="mapbox://styles/mapbox/streets-v11"
mapboxApiAccessToken={MAPBOX_TOKEN}
>
{Object.values(sigfox).map((docs) => {
return (docs.status !== 255 && (docs.lat >= -90 && docs.lat <= 90) ) ?
<Marker
key={docs.id}
latitude={docs.lat}
longitude={docs.lon}
offsetTop={-35}
offsetLeft={-8}
>
<div>
<button onClick={e => {e.preventDefault(); setFleetDetail(docs)}}>{docs.device}</button>
</div>
</Marker>
: null
})}
{/* display the pop up detail when click the icon */}
{fleetDetail ? (
<Popup
latitude={fleetDetail.lat}
longitude={fleetDetail.lon}
onClose={()=>{
setFleetDetail(null)
}}
>
<div>
<p>Device:{fleetDetail.device}</p>
<p>Latitude:{fleetDetail.lat}</p>
<p>Longitude:{fleetDetail.lon}</p>
<p>status:{fleetDetail.status}</p>
</div>
</Popup>
): null}
</StaticMap>
</DeckGL>
</div>
);
})
非常感谢 ：）