将传单插件添加到 React-Leaflet

Question

我正在尝试在 react-leaflet v2 extending a leaflet plugin 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>

有帮助吗？？？

Answer 1

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

<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(); => 将从地图中删除线。

Answer 2

是的，这在过去使用 v1.x 的 react-leaflet

非常简单

我运行遇到了类似的扩展问题，我已经在 react-leaflet github 回购上提出了一个问题，希望 Paul 能为我们指明方向。 https://github.com/PaulLeCam/react-leaflet/issues/506

现在降级到 v1.9 适合我。

将传单插件添加到 React-Leaflet

Add leaflet plugins to React-Leaflet

javascript

leaflet

reactjs

react-leaflet