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: '© <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>
この点や、本当に参考になります最善のアプローチ上の任意のヘルプです。
あなたはどこかの完全なデモを投稿できますか? – snkashis
こんにちは@snkashis、 私は完全なコードで自分の投稿を編集しました。このコードをページにコピー&ペーストしてデモを見ることができます。 「Leaflet.Editable.js」ファイルを「https://github.com/Leaflet/Leaflet.Editable/blob/gh-pages/src/Leaflet.Editable.js」からダウンロードし、同じフォルダに入れてアクセスしてくださいそれ。ありがとう。 –