我正在尝试在react-leaflet v2中创建一个自定义组件,扩展了一个传单插件EdgeMarker.该文档并未真正提供有关如何执行此操作的详细信息.所以我从repo复制了Leaflet.EdgeMarker.js文件并将其添加到我的实现中.

这是我到目前为止所做的：

import PropTypes from 'prop-types';
import { MapLayer, withLeaflet } from 'react-leaflet';
import L from 'leaflet';
import '../EdgeMarker/EdgeMarker';


class EdgeMarkerComp extends MapLayer{

  static childContextTypes = {
    layerContainer: PropTypes.object
  }

  getChildContext () {
    return {
      layerContainer: this.leafletElement
    }
  }

  createLeafletElement(props) {
    const { options } = props;
    console.log("Options: ", options);
    return new L.EdgeMarker(options);
  }

}

export default withLeaflet(EdgeMarkerComp);

在我的地图上：

const options = {
      icon: L.icon({ // style markers
          iconUrl: 'images/edge-arrow-marker-black.png',
          clickable: true,
          iconSize: [48, 48],
          iconAnchor: [24, 24]
      }),
      rotateIcons: true, 
      layerGroup: null 
};

<Map ...>
  <EdgeMarkerComp options={options} />
</Map>

任何帮助???

解决方法:

我终于通过直接使用地图解决了这个问题.这更方便,在向地图添加交互时给了我更多*.只需将地图定义如下,并使用地图参考执行任何操作：

<Map
  ref={Map => this.map = Map}
  ...
  >
  ...
<Map>

现在,您可以使用react-leaflet定义的this.map.leafletElement在任何传单对象中引用地图：

const polyline = L.polyline([p1,p2 ], {color: 'yellow'}).addTo(this.map.leafletElement);

上面的代码将在地图上添加一个新行.

polyline.remove(); =&GT将从地图中删除该行.