从 MapLayer 组件访问地图（适用于以前的 react-leaflet 版本）

Question

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

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 及更高版本上它会中断。

有什么想法吗？

Answer 1

好的，过了一会儿我找到了解决办法。 Cannot read 属性 'getSize' of undefined 错误是由仅在整个模块加载后才传递给 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>
      )
    }
  }

然后在渲染方法中注入。

仍然不知道为什么旧版本的 react-leaflet 没有出现这个问题。

从 MapLayer 组件访问地图（适用于以前的 react-leaflet 版本）

Accessing map from MapLayer component (works on previous react-leaflet version)

leaflet

reactjs

leaflet-routing-machine

react-leaflet