2016-06-29 13 views
0

レイヤリーフレットJを使用してOSMを使用しています。リーフレット.Editable.jsを使用して円を編集しようとしています。私は、「編集可能:頂点:dragend」イベントを使用してサークルと半径を取得することは適切なアプローチではないと考えています。 円の中心と半径をドラッグした後に取得する方法はありますか? は、ここに私のapprachOSM leafleft JS編集可能な円の中心と半径を取得する

<link href="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.css" rel="stylesheet" type="text/css" /> 
<script src="https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/master/leaflet.js"></script> 
<script src="Leaflet.Editable.js"></script> 
<style type="text/css"> 
    #mapdiv { height: 500px; } 
</style> 
<div id="mapdiv"></div> 
<script type="text/javascript"> 

     var map = L.map('mapdiv', {editable: true}).setView([23.2599333, 77.41261499999996], 13); 
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', 
      maxZoom: 30 
     }).addTo(map); 

     L.EditControl = L.Control.extend({ 
      options: { 
       position: 'topleft', 
       callback: null, 
       kind: '', 
       html: '' 
      }, 

      onAdd: function (map) { 
       var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'), 
        link = L.DomUtil.create('a', '', container); 

       link.href = '#'; 
       link.title = 'Create a new ' + this.options.kind; 
       link.innerHTML = this.options.html; 
       L.DomEvent.on(link, 'click', L.DomEvent.stop) 
          .on(link, 'click', function() { 
          window.LAYER = this.options.callback.call(map.editTools); 
          }, this); 

       return container; 
      } 

     }); 


     var circle = L.circle([23.2599333, 77.41261499999996], {radius: 1000}).addTo(map); 
     circle.enableEdit(); 
     circle.on('dblclick', L.DomEvent.stop).on('dblclick', circle.toggleEdit); 
     //circle.on('editable:vertex:drag', function (e) { 
     map.on('editable:vertex:dragend', function (e) { 
      //alert(e.vertex.latlng); 
      circle.setLatLng(e.vertex.latlng); 
      alert(circle.getRadius()); 
     }); 

</script> 

この点や、本当に参考になります最善のアプローチ上の任意のヘルプです。

+1

あなたはどこかの完全なデモを投稿できますか? – snkashis

+0

こんにちは@snkashis、 私は完全なコードで自分の投稿を編集しました。このコードをページにコピー&ペーストしてデモを見ることができます。 「Leaflet.Editable.js」ファイルを「https://github.com/Leaflet/Leaflet.Editable/blob/gh-pages/src/Leaflet.Editable.js」からダウンロードし、同じフォルダに入れてアクセスしてくださいそれ。ありがとう。 –

答えて

0

はい、私は、これが円の外縁に頂点をドラッグのいずれかのために働く、またはセンターマーカーから全体円のドラッグ

map.on('editable:drawing:move', function (e) { 
    console.log(circle.getLatLng()) 
    console.log(circle.getRadius()); 
}); 

を使用してお勧めします。

関連する問題