web-dev-qa-db-ja.com

Leaflet.drawマッピング：ツールバーなしで描画機能を開始する方法

Leafletまたはleaflet.drawプラグインを使用した経験がある方へ：

_leaflet.draw_のツールバーを使用せずにポリゴンの描画を開始したい。オンラインで検索することで、ツールバーを使用せずに編集できるプロパティ（layer.editing.enable();）を見つけることができました（メインのドキュメントにはありません）。ツールバーボタンなしでポリゴンの描画を開始する方法を見つけることができないようです。どんな助けでも大歓迎です！

ありがとうございました ：）

javascriptleafletgisleaflet.draw
37
SamEsla

この単純なコードは私のために働く：

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

カスタムボタンのonclickハンドラー（または任意の場所）に配置するだけです。

変数mapおよびdrawControlは、リーフレットマップおよび描画コントロールへの参照です。

ソースコード（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.EditおよびL.EditToolbar.Deleteクラスは、次の便利なメソッドを公開します。

  • enable（）：編集/削除モードを開始します
  • disable（）：標準モードに戻ります
  • save（）：変更を保存します（draw：edited/draw：deletedイベントを起動します）
  • revertLayers（）：変更を取り消す
62
BaCH

円についてはこれを理解しましたが、多角形についても同じであるはずです。実際には非常に簡単です。次のコードがあなたの質問に答えることを願っていますが、教えてくれない場合はGistなどにもっと投稿できます。

// 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（）/。disable（）で編集を制御できます。

質問がある場合は必ずコメントしてください。頑張って.

4
Gowiem

Jacob Toyes answer この問題に言及する価値があると思います。常に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.drawgithubページに例があります： https://github.com/Leaflet/Leaflet.draw /blob/master/examples/edithandlers.html

それでも、ハンドラーはまだ十分に文書化されていないと思います。

上記のように、L.EditToolbar.EditおよびL.EditToolbar.Deleteは、editstartおよびなどの興味深いメソッドとイベントを公開しますeditstop。言及されていないのは、これらの2つのクラス自体がL.Handlerから派生していることです。

2
schmijos