Leaflet.draw映射:如何在没有工具栏的情况下启动绘图功能?

问题描述 投票:37回答:3

对于有leaflet或leaflet.draw插件经验的人:

我想不使用leaflet.draw中的工具栏来开始绘制多边形。我设法通过在线搜索找到了允许不使用工具栏(layer.editing.enable();)进行编辑的属性(它不在主要文档中)。如果没有工具栏按钮,我似乎找不到如何开始绘制多边形的方法。任何帮助将不胜感激!

谢谢:)

javascript leaflet gis leaflet.draw
3个回答
62
投票

此简单代码对我有用:

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类提供以下有用的方法:

  • enable():开始编辑/删除模式
  • disable():返回标准模式
  • save():保存更改(触发draw:edited / draw:deleted事件)
  • revertLayers():撤消更改

4
投票

所以我已经为圆形弄清楚了,但是对于多边形应该一样。实际上非常简单。希望以下代码可以回答您的问题,但是如果没有让我知道,我可以发布更多内容。

// 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()
  }
}
},

抱歉,很多只是噪音,但是它应该使您知道如何解决这个问题。您可以使用edit.enable()/。disable()来控制编辑。

请确保对任何问题发表评论。祝你好运


3
投票

我认为这个问题值得一提。您总是在leaflet.draw中使用处理程序进行绘图-而不是直接使用图层。如果要编辑图层,请使用保存在图层Jacob Toyes answer字段中的处理程序,如下所示:editing。如果要创建新图层,请首先创建一个新处理程序:

layer.editing.enable();

现在,在[[leaflet.draw github页面上实际上有一个示例:// 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(); });

尽管如此,我认为处理程序在这里还没有得到很好的记录。

如上所述,https://github.com/Leaflet/Leaflet.draw/blob/develop/docs/examples/edithandlers.htmlL.EditToolbar.Edit公开了有趣的方法和事件,例如

editstart

editstop。没有提到的是,这两个类本身是从L.EditToolbar.Delete派生的。
© www.soinside.com 2019 - 2024. All rights reserved.