Как создать кнопку с функцией рисования полигонов в Leaflet?

Question

Я хочу создать кнопку, функция которой совпадает с панелью инструментов на листовой карте. При нажатии пользователь может рисовать фигуры на карте с помощью функции Создать, но я не знаю, как сделать кнопку с этой опцией для рисования полигонов .

Это мой код компонента, который инициализирует карту листовки:

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 в приведенном выше примере:

• полилиния: leaflet-draw-draw-polyline,
• маркер: leaflet-draw-draw-marker,
• редактировать: leaflet-draw-edit-edit,
• удалить: leaflet-draw-edit-remove,
• et c ...

Это не самое элегантное решение, но оно работает и спасло меня от дальнейших неприятностей.