leaflet绘制图形

var oBtnCanvans = document.getElementsByTagName('button')[0];
        oBtnCanvans.addEventListener('click', function () {
            if(qjcircle!=null && qjcircle!=undefined && qjcircle!=""){
                map.removeLayer(qjcircle);
                $('#minwd').val("");
                $('#maxwd').val("");
                $('#minjd').val("");
                $('#maxjd').val("");
            }
            map.on('mousedown', function (e) {
                var lastLatlng = e.latlng;
                var nowLatlng, circle;
                map.dragging.disable();//关闭地图拖拽功能
                map.on('mousemove', function (e) {
                    if (circle) {
                        map.removeLayer(circle);
                    }
                    var nowLatlng = e.latlng;
                    circle = L.rectangle([lastLatlng,nowLatlng], {color: "blue", weight: 1});
                    qjcircle=circle;
                    map.addLayer(circle);
                    if(arrLatLon.length==2){
                        //纬度
                        if(lastLatlng.lat>nowLatlng.lat){
                            $('#minwd').val(nowLatlng.lat.toFixed(2));
                            $('#maxwd').val(lastLatlng.lat.toFixed(2));
                        }else{
                            $('#minwd').val(lastLatlng.lat.toFixed(2));
                            $('#maxwd').val(nowLatlng.lat.toFixed(2));
                        }
                        //经度
                        if(lastLatlng.lng>nowLatlng.lng){
                            $('#minjd').val(nowLatlng.lng.toFixed(2));
                            $('#maxjd').val(lastLatlng.lng.toFixed(2));
                        }else{
                            $('#minjd').val(lastLatlng.lng.toFixed(2));
                            $('#maxjd').val(nowLatlng.lng.toFixed(2));
                        }
                        
                        arrLatLon.splice(0,arrLatLon.length);
                        arrLatLon=[];
                    }else{
                        arrLatLon.push(e.latlng);
                    }
                    // 通过添加图层的方式绘制圆形
                });
                map.on('mouseup', function () {
                    map.dragging.enable();//绘制完后开启地图拖拽功能
                     map.off('mousemove',circle.mousemove).off('mouseup', circle.mouseup).off('mousedown', circle.mousedown);
                })
            });
        }, false);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值