私は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>
);
})
どうもありがとうございました ：）