标签: 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 …

我leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw在 Angular 应用程序中使用。

我已经尝试了一切，版本更改，导入模块.forRoot()而不是，在我的angular.json文件中添加 js文件，删除 node_modules，重新安装它们，从头开始遵循@ngx-leaflet-draw 上的指南一百次。

无论我做什么，当我尝试绘制矩形时，它总是会引发此错误：

即使处理程序存在并且所有处理程序都可以完美运行，除了矩形（我唯一需要的一个）

如果不是这样，我什至不知道如何为您提供更具体的信息：

• leaflet： 1.5.1
• leaflet-draw： 1.0.4
• @asymmetrik/ngx-leaflet： 6.0.1
• @asymmetrik/ngx-leaflet-draw： 5.0.1

我被这个愚蠢的错误困住了，我不知道如何克服它。请帮忙！

这是演示的回购：https : //github.com/caiusCitiriga/leaflet-rect-drawer

我想让用户能够绘制一条线（这是一条只有 2 个点的折线）。

我启用绘图和监听vertexadded。当_rings标记计数等于 2 时，我禁用绘图。

出于以下几个原因，这种感觉是错误的：

1. 我访问私有变量_rings
2. 现在我禁用绘图，但为了可视化线条，我必须在视觉模式下重新启动它
3. 为了允许用户移动线的 2 个点，我必须在编辑模式下重新启动线。
4. 在编辑模式下，必须禁用两个标记之间的行分割，这可能吗？

我是否缺少一种更简单的方法来做到这一点？

map.pm.enableDraw('Line', {
  snappable: true,
  snapDistance: 20,
});

map.on('pm:drawstart', (event: any) => {
  const { workingLayer } = event;
 
  workingLayer.on('pm:vertexadded', (e: any) => {
    if (workingLayer._rings[0].length >= 2) {

      map.pm.disableDraw('Line', {
        snappable: true,
        snapDistance: 20,
      });
    }
  });
});