时间戳

首页 > 解决方案 > 地图启动时出现 React-mapbox-gl-draw 错误

reactjs - 地图启动时出现 React-mapbox-gl-draw 错误

问题描述

我刚开始react-mapbox-gl-draw 在我的 react-mapbox-gl 应用程序中使用。我正在关注这个非常快速的演示和他们的文档来设置<DrawControl />. 看起来很简单，但我遇到了一个问题。

这是我的代码，错误如下：

import DrawControl from 'react-mapbox-gl-draw';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
// imports 

// ignore the class instantiation, constructor, all that. It works. 

// in the render method: 

<Map
 onStyleLoad={ el => this.map = el} 
 style={this.state.style}
 containerStyle={{
    height: this.state.height,
    width: this.state.width
 }}
 center={[0,0]}
 zoom={[2]} >

     <DrawControl />

</Map>

这是错误：

index.js:14 Uncaught TypeError: map.getStyle is not a function
    at DrawControl.componentDidMount (index.js:14)
    at commitLifeCycles (react-dom.development.js:14361)
    at commitAllLifeCycles (react-dom.development.js:15462)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15603)
    at completeRoot (react-dom.development.js:16618)
    at performWorkOnRoot (react-dom.development.js:16563)
    at performWork (react-dom.development.js:16482)
    at performSyncWork (react-dom.development.js:16454)
    at requestWork (react-dom.development.js:16354)
    at scheduleWork$1 (react-dom.development.js:16218)
    at Object.enqueueSetState (react-dom.development.js:11299)
    at ReactMapboxGl.../../../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:335)
    at r.<anonymous> (map.js:119)
    at r.Ft.fire (mapbox-gl.js:29)
    at r._render (mapbox-gl.js:33)
    at mapbox-gl.js:33

或多或少，显然<DrawControl />是在组件（地图）安装后立即尝试调用方法，但我不确定为什么或如何修复它。我将不胜感激任何帮助和建议！

-编辑- 我在我的地图对象中添加了一个MapContext.Consumer，因为它抱怨想要一个map对象。所以现在它正在安装，但我看不到绘图对象。有任何想法吗？

这是我更新的代码：

<Map
 onStyleLoad={ el => this.map = el} 
 style={this.state.style}
 containerStyle={{
    height: this.state.height,
    width: this.state.width
 }}
 center={[0,0]}
 zoom={[2]} >

    <MapContext.Consumer>
         {(map) => {
              <DrawControl />
         }}
    </MapContext.Consumer>

</Map>

标签： reactjsmapbox-gl-draw

解决方案

所以解决方案是MapboxDraw在MapContext.Consumer. 这是下面的一个片段，MapboxDraw这里是它的链接。这是有效的，因为它可以访问地图对象并且可以直接在地图上绘制。

var draw = new MapboxDraw({
   displayControlsDefault: false,
   controls: {
   polygon: true,
   trash: true
   }
});

推荐阅读