我正在尝试在 react-leaflet
到目前为止,我已经完成了以下操作:
v2
中创建一个自定义组件,扩展了一个叫做EdgeMarker的 leaflet 插件。然而,文档没有明确说明如何操作。因此,我将 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>
需要帮忙吗?