Question

我正在使用层Leaflet Js使用OSM。我正在尝试使用Leaflet.Editable.js编辑圆圈。我认为，使用＆＃39; editable：vertex：dragend＆＃39;获取圆和半径。事件不是一种正确的方法。拖动后是否还有其他方法可以获得圆心和半径。这是我的apprach

    <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>

任何有关这方面的帮助或最佳方法都会非常有用。

Answer 1

是的，我建议使用

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

这适用于拖动圆的外边缘上的顶点，或者从中心标记拖动整个圆圈。

OSM leafleft JS获取可编辑圆的中心和半径

1 个答案: