React Leaflet.draw: как создавать функции рисования со стандартными кнопками без использования панели инструментов Reaction-leaflet, однако, это должно быть написано в «React» - PullRequest
Новая
       27

React Leaflet.draw: как создавать функции рисования со стандартными кнопками без использования панели инструментов Reaction-leaflet, однако, это должно быть написано в «React»

0 голосов
/ 16 июня 2019

как я могу создать пользовательские кнопки, расположенные на карте листовки в отдельном блоке управления, чтобы создать «Полилинии», «Полигоны» или «Маркер», которые будут все на отдельных кнопках без использования leaflet-draws стандартная панель инструментов интерфейса пользователя . Я действительно хотел бы знать, как написать это "React" способом по сравнению с Vanilla Javascript, поскольку вся моя программа написана на React. Если бы кто-нибудь мог собрать простую программу, показывающую, как рисовать «ломаные линии, многоугольники» и т. Д. В React с помощью отдельных кнопок, это было бы очень полезно.

Вот фрагмент моего кода. Спасибо 

  <Map
                            zoomControl={false}
                            center={position}
                            zoom={this.state.zoom}
                            className={classes.height}
                            ref={m => {
                                this.leafletMap = m;
                            }}>
                            {/* LAYER CONTROL ON TOP OF MAP*/}
                            <LayersControl position="topright">
                                <BaseLayer checked name="OpenStreetMap.Mapnik">
                                    <TileLayer
                                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                    />
                                </BaseLayer>
                                <BaseLayer name="OpenStreetMap.BlackAndWhite">
                                    <TileLayer
                                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                        url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
                                    />
                                </BaseLayer>
                            </LayersControl>

                            **CALLS OTHER COMPONENT WHICH RENDERS FEATUREGROUP, EDITCONTROL**
                            **<Mapediting save={this.setSave} myIcon={myIcon} />**

                            <ZoomControl position="topright" />
                            <TileLayer
                                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                            />
                            {/* show users general area */}
                            <Marker position={position} icon={myIcon} title="Your Position" draggable={true}>
                                {/* <Popup>
                                      Your Mapped Location <br /> Lat: {this.state.location.lat} Long:
                                   {this.state.location.lng}  
                                </Popup> */}
                            </Marker>
                        </Map>

Прочие компоненты 

const mapSelectors = myIcon => (
    <FeatureGroup>
        <EditControl
            style={{ backgroundColor: "blue" }}
            onCreated={event => _onCreate(event)}


            draw={{
                polyline: {
                    shapeOptions: { color: "red" },
                    allowIntersection: false,
                    showLength: true,

                    metric: false,
                    feet: false
                },
                polygon: {
                    allowIntersection: false,
                    shapeOptions: { color: "blue" },
                    edit: false,
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                rectangle: {
                    shapeOptions: { color: "green" },
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                circle: {
                    shapeOptions: { color: "magenta" },
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                marker: { zIndexOffset: "999", edit: true, icon: myIcon }
            }}
        />
        {/* {(L.drawLocal.draw.toolbar.buttons.polygon = "draw")} */}

        <Circle center={[51.51, -0.06]} radius={200} />
    </FeatureGroup>
);

class MapEditing extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            draw: false
        };
    }
 render() {
        const { classes, save, myIcon } = this.props;

        return (

                        {this.state.draw && mapSelectors()}
)
``` Additional form code not shown
...