微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

leaflet 绘制 点 线 面 圆 椭圆 线缓冲区

分类：Gis作者：秋荷雨翔原文地址

    leaflet有个绘图插件leaflet.draw，但是我不想要它的控件，只想用它的绘制功能，控件我自己提供，当时不知道如何使用，就自己写了个绘制点线面圆和椭圆的工具，代码如下：

/// <reference path="define.js" />
/// <reference path="icon.js" />/ <reference path="map.js" />/ <reference path="../dist/l.ellipse.js" />/ <reference path="../dist/turf.js" />/ <reference path="../libs/layer/layer.js" />

/**
 * 绘图
 */

var drawUtil = (function () {

    图层
    var _drawLayer;

    绘图类型 1：多边形 2：画线 3：画矩形 4：画椭圆 5选择位置 6画圆
     _drawType;

    是否允许mousemove事件
    var _allowMouseMove = true;

    多边形点集合
    var _polygonPointArr = [];

    多边形
     _polygon;

    线的点集合
    var _polylinePointArr =线
     _polyline;

    线克隆
    var _polylineClone; 防止绘图结束线被清空不能绘制线缓冲区

    画矩形时mousedown点击的那个点
     _rectangleInitPoint;

    矩形点集合
    var _rectanglePointArr =矩形
     _rectangle;

    画椭圆时mousedown点击的那个点
     _ellipseInitPoint;

    椭圆点集合
    var _ellipsePointArr =椭圆
     _ellipse;

    画圆时mousedown点击的那个点
     _circleInitPoint;

    圆点集合
    var _circlePointArr =圆
     _circle;

    线缓冲区点集合
    var _polylineBufferPointArr =缓冲区
     _polylineBuffer;

    位置marker
     _locationMarker;

    地图层级改变
    var _mapZoomChanged = false是否移动了地图
    var _isMapMoved = 是否按下鼠标
    var _isMouseDown = 结束绘图回调
     _endDrawCallback;

    地图中心
     _mapCenter;

    线条颜色
    var _strokeColr = "#f84400"填充颜色
    var _fillColor = "#f84400"用于绘图的div层
     _drawPane;

     _drawPaneBelow;

    *
    * 开始绘图
    * @param [int] type 绘图类型 1：多边形 2：画线 3：画矩形 4：画椭圆 5选择位置 6画圆
    */
    var _startDraw =  (type) {
        _stopDraw();
        _drawType = type;

        _mapCenter = map.getCenter();

        map.addEventListener("mousedown",_mousedown);
        map.addEventListener("mousemove"结束绘图
    var _endDraw =  (e) {
        if (_drawType == 3 || _drawType == 4 || _drawType == 6) { 结束画矩形、椭圆
            map.dragging.enable();
        }

        if (_drawType == 2) { 画线
            if (jsObjExists()) jsObj.DrawEnd(_drawType);
        }

        _polylineClone = _polyline;

        if (_drawType == 1 && _endDrawCallback) _endDrawCallback(_polygon);
        if (_drawType == 2 && _endDrawCallback) _endDrawCallback(_polyline);
        if (_drawType == 3 && _endDrawCallback) _endDrawCallback(_rectangle);
        if (_drawType == 4 && _endDrawCallback) _endDrawCallback(_ellipsePointArr);
        if (_drawType == 6 && _endDrawCallback) _endDrawCallback(_circlePointArr);

        _polygonPointArr = [];
        _polygon = undefined;

        _polylinePointArr = [];
        _polyline = undefined;

        _rectanglePointArr = [];
        _rectangleInitPoint = undefined;
        _rectangle = undefined;

        _ellipsePointArr = [];
        _ellipseInitPoint = undefined;
        _ellipse = undefined;

        _circlePointArr = [];
        _circleInitPoint = undefined;
        _circle = undefined;

        _polylineBufferPointArr = [];
        _polylineBuffer = undefined;
    }

    var _registerEndDrawCallback =  (fun) {
        _endDrawCallback = fun;
    }

    map mousedown
    var _mousedown = if (!_drawType) return;

        _allowMouseMove = ;

        _isMouseDown = ;

        _mapCenter = map.getCenter();

        画矩形和椭圆时不能移动地图
            map.dragging.disable();
            _allowMouseMove = ;

            if (e.originalEvent.button == 0) { 左键
                if (_drawType == 3 || _drawType == 4 || _drawType == 6) {
                    _mousedownDraw(e);
                }
            }
        }
    }

    map mousemove
    var _mousemove = ;

         (_allowMouseMove) {
            setTimeout( () {
                _realTimeDraw(e);  实时绘图
            },1);
        }
    }

    map mouseup
    var _mouseup = if (e.originalEvent.button == 2) { 右键
            _endDraw(e); 结束绘图
        }

        左键
            _mapZoomChanged = var center = map.getCenter();
            if (_drawType == 1 || _drawType == 2) {
                if (_mapCenter.lng == center.lng && _mapCenter.lat == center.lat) {
                    _mouseupDraw(e);
                }
            }

            ) {
                _endDraw(e);             }

            if (_drawType == 5 center.lat) {
                    _mouseupDraw(e);
                     (_endDrawCallback) _endDrawCallback(e.latlng.lat,e.latlng.lng);
                }
            }
        }

        setTimeout( () {
            _allowMouseMove = ;
        },100);
    }

    map dblclick
    var _dblclick = ;

        setTimeout( () {
            _endDraw(undefined);
        },1map zoom
    var _zoom = ;

        _mapZoomChanged = ;
    }

    map movestart
    var _movestart = ;

        _isMapMoved = map moveend
    var _moveend = map move
    var _move = 实时绘图
    var _realTimeDraw = 实时画多边形
        if (_drawType == 1 && _polygonPointArr.length > 0) {
            if (_polygon != null) {
                _drawLayer.removeLayer(_polygon);
            }

            if (_polygonPointArr.length > 1) _polygonPointArr.pop();
            var point = [e.latlng.lat,e.latlng.lng];
            _polygonPointArr.push(point);
            _polygon = L.polygon(_polygonPointArr,{ stroke: true,color: _strokeColr,weight: 2,fill: polygon);
        }

        实时画线
        if (_drawType == 2 && _polylinePointArr.length > 0if (_polyline != ) {
                _drawLayer.removeLayer(_polyline);
            }

            if (_polylinePointArr.length > 1) _polylinePointArr.pop();
            polylinePointArr.push(point);
            _polyline = L.polyline(_polylinePointArr,weight: 2polyline);
        }

        实时画矩形
         _rectangleInitPoint) {
            if (_rectangle != ) {
                _drawLayer.removeLayer(_rectangle);
            }

            if (_rectanglePointArr.length > 1) _rectanglePointArr.pop();
            实时画椭圆
         _ellipseInitPoint) {
            if (_ellipse != ) {
                _drawLayer.removeLayer(_ellipse);
            }

            if (_ellipsePointArr.length > 1) _ellipsePointArr.pop();
            _ellipsePointArr[0][0] = _ellipseInitPoint[0] + (point[0] - _ellipseInitPoint[0]) / 2.0;
            _ellipsePointArr[0][1] = _ellipseInitPoint[1] + (point[1] - _ellipseInitPoint[1]) / 2.0var from = turf.point([_ellipsePointArr[0][1],_ellipsePointArr[0][0]]);
            var to1 = turf.point([point[1],1)">var to2 = turf.point([_ellipsePointArr[0][1],point[0var options = { units: 'meters' };

            var distance1 = turf.distance(from,to1,options);
            var distance2 =var radius = [distance2,distance1];

            _ellipsePointArr.push(point);
            _ellipse = L.ellipse(_ellipsePointArr[0],radius,90,pane: _drawPaneBelow });

            _drawLayer.addLayer(_ellipse);
        }

        实时画圆
         _circleInitPoint) {
            if (_circle != ) {
                _drawLayer.removeLayer(_circle);
            }

            if (_circlePointArr.length > 1) _circlePointArr.pop();

            var d = Math.pow(Math.pow(point[0] - _circleInitPoint[0],2) + Math.pow(point[1] - _circleInitPoint[1],2),0.5);
            point[0] = _circleInitPoint[0] - d;
            point[1] = _circleInitPoint[1] + d;

            var from = turf.point([_circlePointArr[0][1],_circlePointArr[0][0var to2 = turf.point([_circlePointArr[0][1],distance1];

            _circlePointArr.push(point);
            _circle = L.ellipse(_circlePointArr[0],pane: _drawPaneBelow });

            _drawLayer.addLayer(_circle);
        }
    }

    停止绘图
    var _stopDraw =  () {
        map.removeEventListener("mousedown"polygonPointArr = undefined;

        map.dragging.enable();

        isPointSelect = false; 清除点选

        _drawType = undefined; 清除绘图
    };

    清空绘图
    var _clearDraw =  () {
        _drawLayer.clearLayers();
        _locationMarker = ;
    };

    点击绘图
    var _mousedownDraw =  (e) {
        setTimeout(function () { 使用setTimeout map的dblclick才会触发
            画矩形
            if (_drawType == 3) {
                    _drawLayer.removeLayer(_rectangle);
                }

                _rectangleInitPoint =画椭圆
            if (_drawType == 4) {
                    _drawLayer.removeLayer(_ellipse);
                }

                _ellipseInitPoint =画圆
            if (_drawType == 6) {
                    _drawLayer.removeLayer(_circle);
                }

                _circleInitPoint =var _mouseupDraw = 画多边形
            if (_drawType == 1) {
                    _drawLayer.removeLayer(_polygon);
                }

                polygonPointArr.push(point);
                _polygon = L.polygon(_polygonPointArr,pane: _drawPaneBelow });

                _drawLayer.addLayer(_polygon);
            }

            if (_drawType == 2) {
                    _drawLayer.removeLayer(_polyline);
                }

                polylinePointArr.push(point);
                _polyline = L.polyline(_polylinePointArr,pane: _drawPane });

                _drawLayer.addLayer(_polyline);
            }

            选择位置
            if (_locationMarker != ) {
                    _drawLayer.removeLayer(_locationMarker);
                }

                var latlng = new L.LatLng(rectifyLat(e.latlng.lat),rectifyLng(e.latlng.lng));
                _locationMarker =  L.Marker(latlng,{});
                _locationMarker.setIcon(iconPrision);
                _drawLayer.addLayer(_locationMarker);
            }
        },1)">map的moveend事件中绘图
    var _moveendDraw = 显示缓冲区
    var _showBuffer =  showBuffer(polyline,bufferValue) {
        var pointArr = [];
        var latlngs = polyline.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            pointArr.push([latlngs[i].lng,latlngs[i].lat]);
        }

        var line = turf.linestring(pointArr);
        var buffered = turf.buffer(line,0.001 * bufferValue,{ units: 'kilometers',steps: 64 }); 线左右两边各50米缓冲区，缓冲区宽共100米

        _polylineBufferPointArr = processCoord(buffered.geometry.coordinates);

        _polylineBuffer = L.polygon(_polylineBufferPointArr,pane: _drawPaneBelow });
        drawLayer.addLayer(_polylineBuffer);
    };

     {
        配置
        config:  (drawLayer,drawPane,drawPaneBelow) {
            _drawLayer = drawLayer;
            _drawPane = drawPane;
            _drawPaneBelow = drawPaneBelow;
        },开始绘图
        startDraw: _startDraw,1)">停止绘图
        stopDraw: _stopDraw,1)">清空绘图
        clearDraw: _clearDraw,1)">显示线缓冲区
        showBuffer: _showBuffer,1)">线
        getpolyline:  () {
             _polylineClone;
        },1)">线缓冲区
        getpolylineBuffer:  _polylineBuffer;
        },1)">注册绘图结束回调
        registerEndDrawCallback: _registerEndDrawCallback,1)">绘制的线的点集合
        getpolylinePointArr:  _polylinePointArr;
        },1)">绘制的多边形点集合
        getpolygonPointArr:  _polygonPointArr;
        },1)">绘制的矩形点集合
        getRectanglePointArr:  _rectanglePointArr;
        },1)">设置已选择的位置坐标
        setSelectedLocation:  (lng,lat) {
            ) {
                _drawLayer.removeLayer(_locationMarker);
            }

             L.LatLng(rectifyLat(lat),rectifyLng(lng));
            _locationMarker = fig(drawLayer,drawPaneBelow);
View Code

    如何使用：

    设备点位选择：

/ <reference path="draw.js" />/ <reference path="marker.js" />/ <reference path="../dist/turf.js" />

*
 * 选择marker drawType 1：多边形 2：画线 3：画矩形 4：画椭圆 
 选择完成回调 
var selectComplateCallback = ;

var selectLocationComplateCallback = 选择
 selectMarkers(dataIds) {
    var dataIdArr = dataIds.split(',');
    var i = 0; i < dataIdArr.length; i++) {
        var dataId = dataIdArr[i];
        selectMarker(dataId);
    }
    if (dataIdArr.length > 0) {
        zoomToBounds(selectedMarkerArr);
    }
}

 selectMarker(dataId) {
    var i = 0; i < markerArr.length; i++var marker = markerArr[i];
        if (marker.options.id == dataId) {
            if (!markerExists(selectedMarkerArr,marker)) {
                setMarkerIcon(marker,1)">);
                selectedMarkerArr.push(marker);
            }
        }
    }
}

marker在集合中是否存在
 markerExists(arr,marker) {
    var exists = ;
    var m = 0; m < arr.length; m++if (arr[m].options.id == marker.options.id) {
            exists = ;
        }
    }
     exists;
}

清空相机选择
 clearSelect() {
    var i = 0; i < selectedMarkerArr.length; i++) {
        setMarkerIcon(selectedMarkerArr[i],1)">);
        selectedMarkerArr[i].setZIndexOffset(0);
    }
    selectedMarkerArr = [];
    sectorLayer.clearLayers();
    map.closePopup();
}

Marker去重
 removeRepeatMarkers() {
    var i = 0; i < selectedMarkerArr.length - 1; i++for (j = selectedMarkerArr.length - 1; j > i; j--if (selectedMarkerArr[i].options.id == selectedMarkerArr[j].options.id) {
                selectedMarkerArr.splice(j,1)">);
            }
        }
    }
}

线缓冲区选择
 polylineBufferSelect(bufferValue) {
    drawUtil.showBuffer(drawUtil.getpolyline(),bufferValue);

    selectedMarkerArr = selectedMarkerArr.concat(selectBypolygon(markerArr,drawUtil.getpolylineBuffer()));
    removeRepeatMarkers();去重

    var idArr = [];
     selectedMarkerArr[i];
        idArr.push(marker.options.id);
    }

    drawUtil.stopDraw();
     (selectComplateCallback) selectComplateCallback(idArr);
    if (jsObjExists()) jsObj.AddSelectedByDraw(idArr.join(","));
}

多边形选择
 polygonSelect() {
    drawUtil.startDraw(1);
    drawUtil.registerEndDrawCallback( (d) {
        drawUtil.stopDraw();
        if (!d) ;
        if (d.getLatLngs()[0].length > 2) {
            selectedMarkerArr =像机去重

             [];
             selectedMarkerArr[i];
                idArr.push(marker.options.id);
            }

             (selectComplateCallback) selectComplateCallback(idArr);
            ));
        }
    });
}

框选
 BoxSelect() {
    drawUtil.startDraw(3if (d.getLatLngs()[0].length > 3椭圆选择
 ellipseSelect() {
    drawUtil.startDraw(4if (d.length > 1 selectedMarkerArr.concat(selectByEllipse(markerArr,1)">圆选
 circleSelect() {
    drawUtil.startDraw(6线选
 lineselect() {
    drawUtil.startDraw(2 (line) {
         (line) {
            var popup = layer.open({
                type: 0],title: '请输入缓冲区半径' (index,layero) {
                    var val = $(layero).find("#radius").val();

                    var reg = /^[1-9][0-9]{0,2}$/;
                    reg.test(val)) {
                        alert("请输入3位以内的整数");
                        ;
                    }

                    polylineBufferSelect(val);

                    layer.close(popup);
                },btn2:  () {
                    drawUtil.stopDraw();
                },cancel:  () {
                    drawUtil.stopDraw();
                }
            });
        }
    });
}

点选
 pointSelect() {
    isPointSelect = ;
}

选择位置
 selectLocation() {
    drawUtil.startDraw(5 (lat,lng) {
         (selectLocationComplateCallback) selectLocationComplateCallback(lat,lng);
    });
}

 selectBypolygon(markerArr,polygon) {
    drawType = var selectedMarkerArr =var poly = turf.polygon(polygon.toGeoJSON(8).geometry.coordinates);
    var point = turf.point(marker.toGeoJSON(8).geometry.coordinates);

         (turf.booleanPointInpolygon(point,poly)) {
            setMarkerIcon(marker,1)">);
            selectedMarkerArr.push(marker);
        }
    }
     selectedMarkerArr;
}

矩形选择
 selectByRectangle(markerArr,rectangle) {
    drawType = var poly = turf.polygon(rectangle.toGeoJSON(8poly)) {
            if (layerIndex == 0) {
                setCameraMarkerIcon(marker,1)">);
            } else {
                setMarkerIcon(marker,1)">);
            }
            selectedMarkerArr.push(marker);
        }
    }
     selectByEllipse(markerArr,ellipsePointArr) {
    drawType =  { x: marker.getLatLng().lng,y: marker.getLatLng().lat };

         (isPointInEllipse(point,ellipsePointArr)) {
            setMarkerIcon(marker,1)"> selectedMarkerArr;
}
View Code

    距离面积测量：

*
 * 量算
 距离量算
 measuredistance() {
    drawUtil.startDraw(2 [];
        d.getLatLngs().map(item=> {
            pointArr.push([item.lng,item.lat]);
        });
        if (pointArr.length > 1 turf.linestring(pointArr);
            var length = turf.length(line,{ units: 'kilometers' });
            if (length < 1) {
                layer.alert((length * 1000).toFixed(2) + "米",{ title: "长度" });
            }  {
                layer.alert(length.toFixed(5) + "公里",1)"> });
            }
        }
    });
}

面积量算
 measureArea() {
    drawUtil.startDraw(1 [];
        d.getLatLngs()[0].map(item=>if (pointArr.length > 0) {
            pointArr.push(pointArr[0]);
        }
        if (pointArr.length > 3var polygon = turf.linetopolygon(line);
            var unkinkpolygon = turf.unkinkpolygon(polygon);
            var area = turf.area(unkinkpolygon);
            if (area < 1000000) {
                layer.alert(area.toFixed(4) + "平方米",{ title: "面积" {
                layer.alert((area / 1000000.0).toFixed(6) + "平方公里",1)"> });
            }
        }
    });
}
View Code

     效果图：

 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

QGIS
https://www.osgeo.cn/qgis-tutorial/overview.html https://www.osgeo.cn/pygis/  《Python与开源GIS》配套资源（扫码关注微信公众号（gislite），输入“Python与开源GIS”获取下载方式）《Python与开源GIS》配套资源（扫码关注微信公众号（gislite），输入“Python与开源GIS”获取下
硬核技术！基于BIM+GIS技术的公路工程可视化管理平台
设计方案是工程建设最关键的环节，也是影响城市规划的基本因素，方案设计水平的高低更是直接影响着项目的经济和社会效益。在新基建的牵引下，可视化、数字化、信息化转型逐渐成为工程行业共识。因此，BIM已成为各行业尤其是高速公路等带状工程项目解决实际问题的重要生产工具。图新地球w
BIM与GIS
BIM与GIS的区别与联系http://www.bimcn.org/cjwt/2018111516177.html链接：Link
转载某位GIS前辈的感悟，勉励自己，冲啊！
成功有感之给年轻人的10个忠告1、努力工作要努力，随随便便过日子过四五年也是过，稍微努力的过四五年也是过，努力的过四五年也是过，何不努力好好的干。如果努力的过好毕业后的四五年，这对我们以后的人生非常有帮助。2、虚心学习多与比自己大的人(长辈)/成功人士交流学习，要虚心听
python中的测地线缓冲
鉴于陆地多边形为ShapelyMultiPolygon,我想找到代表例如多边形的多边形(多边形).海岸线周围12海里的缓冲区.使用Shapely缓冲区方法不起作用,因为它使用欧几里德计算.有人能告诉我如何计算python中的测地缓冲区吗？解决方法:这不是一个形状问题,因为在其文档中明确地说明该库仅用于
一个误入歧途的GIS人的技术挑战宣言
背景与宣言传统的GISC/S开发已经很被别人不屑了，在时代的洪流下，我深知，再敝扫自珍就是断了自己的活路。二维地图已经是高峰和逐渐被遗弃了，如果再深耕也仅仅是追赶先进步伐的份了。三维WebGIS也才开始几年而已，在这个点上还能有所作为。所以，从今天开始，我决定，在去年开始的WebGIS开发的
javascript – 如何检查是否加载了Dojo对话框？
我正在运行一个函数,如果它被加载,需要关闭一个Dojo对话框.如何检查dojo对话框是否正在运行？如果未定义,我是否使用纯JavaScript并按ID检查？if(dijit.byId("blah")!==undefined){destroyRecursivedijit;}或者我使用对话框对象的属性,如：isFocusablemethodisLoade
【强烈推荐】免费GIS数据共享的qq群
1.中国大陆ArcGIS交流群（名字很怪，数据很多）群号828589843 群主制作的乔峰地球是个不错的东西，详情请看博文 【高速版收费】如何免费下载谷歌地图影像，谷歌地球影像，谷歌高程，以及高德建筑轮廓？-qf810404的博客-CSDN博客 https://blog.csdn.net/qf810404/article/details
一步一步手写GIS开源项目-1500行代码实现基础GIS展示功能
1.开篇      大学毕业工作已经两年了，上学那会就很想研读一份开源GIS的源码，苦于自己知识和理解有限，而市面上也没有什么由浅入深讲解开源gis原理的书籍，大多都是开源项目简介以及项目的简单应用。对于初级程序员想读懂一个成熟的GIS开源项目的困难点主要有三点，1.开发经验和gis
ArcGIS探索
一、ArcGIS10概述1.1总览 ArcGIS是地理信息系统平台软件，主要用于创建和使用地图，编辑和管理地理数据，分析和共享地理信息，并在一系列应用中使用地图和地理信息。功能定位：a.地图：ArcGIS地图不仅包括构建地图是用到的地理数据，还包括用来获取所需结果的分析工具
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native