将传单插件添加到 React-Leaflet

Question

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

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

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>

任何帮助？？？

Answer 1

最后我直接用地图解决了这个问题。这更加方便，在向地图添加交互的同时给了我更多的自由。只需按如下方式定义您的地图并使用地图引用来执行任何操作：

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

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

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

上面的代码将在地图上添加一条新线。

polyline.remove();=> 将从地图上删除该线。