从MapLayer组件访问地图（适用于之前的反应传单版本）

Posted 2021-04-13

我试图在传单地图上显示两点之间的路线。为此我使用传单路由机。但是我将map对象传递给leaflet route组件时遇到了问题。

map_container.js

...
        return (
            <Map ref='map' center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Routing map={this.refs.map} from={[51.599684, 15.27539]} to={[51.602292, 15.295128]} />
            </Map>
        )
...

routing.js

import {MapLayer} from 'react-leaflet';
import L from 'leaflet';
import 'leaflet-routing-machine';

export default class RoutingMachine extends MapLayer {
    componentWillMount() {
        super.componentWillMount();
        this.leafletElement.addTo(this.props.map);
    }

    render() {
        return null;
    }

    createLeafletElement (props) {
        const {from, to} = this.props;
        console.log(this.props)
        var leafletElement = L.Routing.control({
            waypoints: [
                L.latLng(from[0], from[1]),
                L.latLng(to[0], to[1]),
            ],
        });
        return leafletElement;
    }
}

我得到的错误：

{map: undefined, from: Array(2), to: Array(2)}

bundle.js:69506 Uncaught TypeError: Cannot read property 'getSize' of undefined
    at NewClass.onAdd (bundle.js:69506)
    at NewClass.onAdd (bundle.js:68679)
    at NewClass.addTo (bundle.js:26718)

但最有趣的是 - 一切都在“react-leaflet”：“1.1.0”版本上完美运行，但在1.1.1及更高版本上它会中断。

有任何想法吗？

答案

哦，过了一会儿我找到了解决方案。无法读取属性'getSize'的未定义错误是由于只有在整个模块加载后传递给refs的地图引起的。它可以通过添加：

return ( this.map ? 
        <Map onClick={(e) => this._mapClickEvent(e)} className="main-screen-map-container" center={position} 
             zoom={this.state.zoom} ref={map => this.map = map}> 

          <TileLayer 
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          /> 
          <Routing map={this._getMap()} from={[11.11, 12.12]} to={[11.11, 12.12]}
                   by={this.props.busstops}/>  
        </Map> 
        : 
        <Map onClick={(e) => this._mapClickEvent(e)} className="main-screen-map-container" center={position} 
             zoom={this.state.zoom} ref={map => this.map = map}> 

          <TileLayer 
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          /> 
        </Map> 

哪个检查是否已经定义了地图，然后在路上重新渲染它。根据您的其余代码（如果您使用Redux获取某些数据并设置强制更新的状态），可能还需要添加以下代码：

 componentDidMount() { 
    console.log("map did mount " + this.map); 
    this.forceUpdate() 
  } 

那应该解决它。 PS三元运算符也可以通过删除冗余代码并仅添加来重构

 _addRouting() {
    if (this.map) {
      return (
          <div>
            <Routing map={this._getMap()} from={[11.11, 12.12]} to={[11.11, 12.12]}
                     by={this.props.busstops}/>
          </div>
      )
    }
  }

然后在render方法中注入它。

仍然不知道为什么在旧版本的反应传单上没有出现这个问题。