Кнопка пользовательского управления Reactjs Leaflet

Question

Я пытаюсь добавить пользовательскую кнопку для масштабирования на листовую карту в ReactionJS. Это мой код

import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet';
import Control from 'react-leaflet-control';
import Button from '@material-ui/core/Button';

class LeafletMapComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];
        return (
            <Map ref={m => { this.leafletMap = m; }} zoomControl={false} center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                />

                <Control position="topleft" >

                </Control>  

            </Map>
        );
    }
}

Я использую react-leaflet-control для создания пользовательского элемента управления, но он выдает ошибку 'Error: createLeafletElement() must be implemented'

Answer 1

После обновления Leaflet до версии 1.1 компонент должен содержать функцию createLeafletElement, в противном случае MapLayer.js выдаст ошибку.

// eslint-disable-next-line no-unused-vars

MapLayer.prototype.createLeafletElement = функция createLeafletElement (props) {throw new Error ('createLeafletElement () должен быть реализован');};

Реализация функции createLeafletElement в ClusterLayer.js для исправления этой ошибки.

ClusterLayer.prototype.createLeafletElement = функция createLeafletElement () {};