Leaflet.draw映射:如何启动绘制功能,无需工具栏?(Leaflet.draw mappin

2019-08-19 03:50发布

对于任何经历过传单或leaflet.draw插件:

我要开始绘制多边形,而无需使用工具栏从leaflet.draw 。 我设法找到它允许编辑,而无需使用工具栏(属性layer.editing.enable(); )通过在线搜索(这不是主要的文档)。 我似乎无法找到如何开始绘制多边形没有工具栏按钮。 任何帮助将非常感激!

谢谢 :)

Answer 1:

这个简单的代码工作对我来说:

new L.Draw.Polyline(map, drawControl.options.polyline).enable();

只要把它放到你的自定义按钮(或任何你想要)的onclick处理程序。

变量mapdrawControl对您的单张地图参考和借鉴控制。

跳水进入源代码(leaflet.draw-src.js),你可以找到的功能绘制其他元素,并修改或删除。

new L.Draw.Polygon(map, drawControl.options.polygon).enable()
new L.Draw.Rectangle(map, drawControl.options.rectangle).enable()
new L.Draw.Circle(map, drawControl.options.circle).enable()
new L.Draw.Marker(map, drawControl.options.marker).enable()

new L.EditToolbar.Edit(map, {
                featureGroup: drawControl.options.featureGroup,
                selectedPathOptions: drawControl.options.edit.selectedPathOptions
            })
new L.EditToolbar.Delete(map, {
                featureGroup: drawControl.options.featureGroup
            })

我希望这将是对你有用的。

编辑: L.EditToolbar.EditL.EditToolbar.Delete类公开以下有用的方法:

  • 启用():开始编辑/删除模式
  • 禁用():返回到标准模式
  • 保存():保存更改(它激发得出:编辑/抽奖:删除事件)
  • revertLayers():撤消更改


Answer 2:

所以,我已经想通了这一点为界,但它应该是多边形相同。 这其实很简单。 希望下面的代码回答你的问题,但如果不是让我知道,我可以发布更多的要点什么。

// Creates the circle on the map for the given latLng and Radius
// If the createdWithAddress flag is true, the circle will not update 
// it's address according to its position. 
createCircle: function(latLng, radius, createdWithAddress) {
if (!this.circle) {
  var self = this,
      centerIcon,
      centerMarker;

  centerIcon = new L.Icon({
    iconUrl: '/assets/location_pin_24px.png',
    iconSize: [24, 24],
    iconAnchor: [12, 24],
    shadowUrl: '/assets/marker-shadow.png',
    shadowSize: [20, 20],
    shadowAnchor:[6, 20]
  })

  // Setup the options for the circle -> Override icons, immediately editable
  options = {
    stroke: true,
    color: '#333333',
    opacity: 1.0,
    weight: 4,
    fillColor: '#FFFFFF',
    moveIcon: centerIcon,
    resizeIcon: new L.Icon({
      iconUrl: '/assets/radius_handle_18px.png',
      iconSize: [12, 12],
      iconAnchor: [0,0]
    })
  }

  if (someConfigVarYouDontNeedToKnow) {
    options.editable = false
    centerMarker = new L.Marker(latLng, { icon:centerIcon })
  } else {
    options.editable = true
  }

  // Create our location circle 
  // NOTE: I believe I had to modify Leaflet or Leaflet.draw to allow for passing in
  // options, but you can make it editable with circle.editing.enable()
  this.circle = L.circle([latLng.lat, latLng.lng], radius, options)

  // Add event handlers to update the location
  this.circle.on('add', function() {
    if (!createdWithAddress) {
      self.reverseGeocode(this.getLatLng())
    }
    self.updateCircleLocation(this.getLatLng(), this.getRadius())
    self.updateMapView()
  })            
  this.circle.on('edit', function() {
    if (self.convertLatLngToString(this.getLatLng()) !== self.getLocationLatLng()) {
      self.reverseGeocode(this.getLatLng())
    }
    self.updateCircleLocation(this.getLatLng(), this.getRadius())
    self.updateMapView()
  })

  this.map.addLayer(this.circle)
  if (centerMarker) {
    centerMarker.addTo(this.map)
    this.circle.redraw()
    centerMarker.update()
  }
}
},

对不起了很多,这只是噪音,但它应该给你如何去了解这一点的想法。 像你editing.enable()说,你可以控制编辑/。禁用()。

确保有任何问题发表评论。 好运气的人。



Answer 3:

我认为这是值得一提的雅各Toyes回答这个问题。 你总是在leaflet.draw处理器绘图-不直接与层。 如果你想编辑图层,使用保存在一个层中的处理程序editing场这样的: layer.editing.enable(); 。 如果你想创建一个新的图层,首先创建一个新的处理程序:

// Define you draw handler somewhere where you click handler can access it. N.B. pass any draw options into the handler
var polygonDrawer = new L.Draw.Polyline(map);

// Assumming you have a Leaflet map accessible
map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

    // Do whatever you want with the layer.
    // e.type will be the type of layer that has been draw (polyline, marker, polygon, rectangle, circle)
    // E.g. add it to the map
    layer.addTo(map);
});

// Click handler for you button to start drawing polygons
$('#draw_poly').click(function() {
    polygonDrawer.enable();
});

现在实际上存在的leaflet.draw GitHub的页面上的例子: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

不过我觉得处理程序不是有案可稽那里。

如同上述, L.EditToolbar.EditL.EditToolbar.Delete显露出十分有趣的方法和事件,如editstarteditstop。 有什么理由不提的是,这两个类本身都源于L.Handler



文章来源: Leaflet.draw mapping: How to initiate the draw function without toolbar?