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);
如何使用:
设备点位选择:
/ <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; }
距离面积测量:
* * 量算 距离量算 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)"> }); } } }); }
效果图: