标签: react-leaflet-draw

如何在单独的控制框中创建位于传单地图上的自定义按钮，以创建“折线”、“多边形”或“标记”，这些按钮都将位于单独的按钮上，而不使用传单绘制的 标准 UI 工具栏。我真的很想知道如何以“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"
  />
  {/* …

我正在尝试将一些 GeoJSON 导入到事件处理程序FeatureGroup中_onFeatureGroupReady，但它似乎没有渲染到地图中。该代码主要基于react-leaflet-draw 此处库中的示例。奇怪的是，编辑菜单变得可用，表明数据可能存在，但只是没有被渲染。

我不确定发生了什么，因为我总体来说是地图的初学者。相关代码在else if(this.props.data) {块中。这些console.log()报表均显示数据存在且格式正确。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              37.79,
              -122.45
            ],
            [
              37.79,
              -122.42999999999999
            ],
            [
              37.77,
              -122.42999999999999
            ],
            [
              37.77,
              -122.45
            ],
            [
              37.79,
              -122.45
            ]
          ]
        ]
      }
    }
  ]
}

这是我尝试将此数据导入到的代码FeatureGroup：

_onFeatureGroupReady = (ref) => {
    console.log('_onFeatureGroupReady');
    console.log(ref);
    if(ref===null) {
        return;//bug???
    }
    this._editableFG = ref; 
    // populate the …