如何在传单中创建具有绘制多边形功能的按钮

Question

我想创建一个按钮，其功能与传单地图中的工具栏相同。当按下时，用户可以在地图上绘制图形onCreate函数，但我不知道如何用这个选项制作一个按钮来绘制多边形。

这是我初始化传单地图的组件代码：

export class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
filenames: [],
downloadURLs: [],
lat: 42.696295,
lng: 23.303643,
zoom: 10,
image: null,
url: "",
progress: 0,
files: [],
uploadValue: 0,
filesMetadata: [],
rows: [],
};
}
//Set location when the map is visualized
mapRef = createRef();

onCreate = (e) => {
var layer = e.layer;
console.log("Polygon Cordinates", layer.getLatLngs());
console.log("Log_Create_Shape: ", e);
var drawedCord = layer.toGeoJSON().geometry.coordinates;
for (const result of drawedCord) this.props.saveData(result);
console.log("shape1", drawedCord);
var data = layer.toGeoJSON();
var convertedData = "text/json;charset=utf-8," + JSON.stringify(data);
console.log(convertedData);
var FileSaver = require("file-saver");
var blob = new Blob([convertedData], { type: "text/plain;charset=utf-8" });
FileSaver.saveAs(blob, "cordinates.json");
};

componentDidMount() {}
render() {
return (

这是我的地图：

<div id="map" className="dashboard container">
<br />
<HorizontalLinearStepper />
<br />
<hr />
<button>Draw polygon</button>
<br />
<Map
style={{ height: "50vh" }}
center={position}
zoom={13}
onClick={this.handleClick}
onCreate={this.onCreate}
onLocationfound={this.handleLocationFound}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<FeatureGroup>
<EditControl
position="topleft"
onEdited={this._onEditPath}
onCreated={this.onCreate}
onDeleted={this._onDeleted}
onMounted={this._mounted}
onEditStart={this._onEditStart}
onEditStop={this._onEditStop}
onDeleteStart={this._onDeleteStart}
onDeleteStop={this._onDeleteStop}
draw={{
rectangle: false,
}}
/>
</FeatureGroup>
<Polygon color="purple" positions={polygon} />
<GeoJSON
data={london_postcodes}
style={this.geoJSONStyle}
onEachFeature={this.onEachFeature}
/>
</Map>

}

Answer 1

我遇到了完全相同的问题，并在检查了这篇文章后提出了解决方案

因此，在多边形的情况下，绘制按钮应该有一个onClick事件，如下所示：

const mapEvent =(e)=> {
var e = document.createEvent('Event');
e.initEvent('click', true, true);
var cb = document.getElementsByClassName('leaflet-draw-draw-polygon');
return !cb[0].dispatchEvent(e);
};

<button onClick={(e)=> {mapEvent(e)}}>
Draw polygon
</button>

使用CSS隐藏默认工具栏按钮：

.leaflet-draw-draw-polygon {
display: none !important;
}

您可以将此方法用于多个传单元素或操作，只需使用以下类而不是上面示例中的leaflet-draw-draw-polygon：

• 折线：CCD_ 2
• 标记：CCD_ 3
• 编辑：CCD_ 4
• 移除：CCD_ 5
• 等等

这不是最优雅的解决方案，但它很有效，使我免于进一步的麻烦。

Answer 2

就我个人而言，我在创建时使用redux来存储传单地图，然后我就可以进行

let drawShapeControl = new L.Draw.Polygon(leafletMap);

其中leafletMap是存储的地图。