Question

我有一个在地图上放置可编辑多边形的组件。当用户点击＆＃34; save＆＃34;按钮，我想访问多边形的新顶点数组，以便我可以保存它们。我该怎么做？

我的组件：

<FeatureGroup>
    <EditControl
        position="topright"
        onEdited={e => console.log(e)}
        edit={{ remove: false }}
        draw={{
                marker: false,
                circle: false,
                rectangle: false,
                polygon: false,
                polyline: false
             }}
        />
        <Polygon positions={polygonCoords} />;
</FeatureGroup>

我得到的几个参考文献：

https://github.com/alex3165/react-leaflet-draw

https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event-draw:editstop

我理解我必须实现处理onEdited钩子和由此生成的事件的某种函数，但有没有人知道如何从这个事件中获取新的顶点数组？

Answer 1

对于任何正在努力解决这个问题的人来说，这是ES6的工作解决方案：

        <FeatureGroup>
            <EditControl
                position="topright"

                //this is the necessary function. It goes through each layer
                //and runs my save function on the layer, converted to GeoJSON 
                //which is an organic function of leaflet layers.

                onEdited={e => {
                    e.layers.eachLayer(a => {
                        this.props.updatePlot({
                            id: id,
                            feature: a.toGeoJSON()
                        });
                    });
                }}
                edit={{ remove: false }}
                draw={{
                    marker: false,
                    circle: false,
                    rectangle: false,
                    polygon: false,
                    polyline: false
                }}
            />
            <Polygon positions={[positions(this.props)]} />;
        </FeatureGroup>
    );

React-Leaflet-Draw：在保存

1 个答案: