leaflet实现地图上的自定义绘制，主要是通过监听map的click、mousemove、dblclick事件来获得对应的点位，然后根据获得的点位进行实时的绘制来达到相应的效果。

矩形绘制的实现

监听map的click事件，获得第一个点，然后开启map的mousemove事件监听，实时重绘矩形，然后再地图第二次点击时，获得第二个点，构成最终绘制的矩形，同时去掉对map的click事件和mousemove事件的监听。

  createRectangle() {let tmplist = []let juxing;map.on("click", (e) => {tmplist.push([e.latlng.lat, e.latlng.lng])this.map.on('mousemove', (ev) => {if (tmplist.length > 1) {tmplist.splice(1)}tmplist.push([ev.latlng.lat, ev.latlng.lng])this.tmpgroup.clearLayers()juxing = L.rectangle(tmplist, {//绘制矩形color: "#ff7800",weight: 1}).addTo(this.tmpgroup);})if (tmplist.length > 1) {tmplist.pop()//第二次点击会触发第一次的push（）导致得到三个数据（后两个一样），所以删除最后一个this.map.off('mousemove')//两点确定，移除鼠标移动事件this.map.off('click')//两点确定，移除点击事件，this.tmpgroup.clearLayers()L.rectangle(tmplist, {//绘制矩形color: "#ff7800",weight: 1}).addTo(this.rectgroup);}})
}

扇形的绘制

监听map的click事件，获得第一个点，然后开启map的mousemove事件监听，当点少于1个的时候，绘制成线，做扇形的一条边，然后再地图第二次点击时，获得第二个点，构成扇形的第二个点，同时在移动时有第3个点，则可构成扇形，进行实时重绘，在地图地3次点击时，绘制成最终的扇形。
扇形需要计算第1个点和第2个点之间的距离作为扇形的半径，计算第1个点和第2个点、第1个点和第3个点的夹角，可以使用地理空间分析库turf来完成计算，

扇形的图形绘制有两种方式实现：

第一种方法：采用Leaflet-semicircle来直接绘制，这种是采用svg进行的绘制，存在一个问题就是无法获取到会指出来的扇形的点位；
第二种方法，采用计算公式来计算出整个扇形的点位，然后以面的方式在地图上绘制出来。

_circle(latlng, options) {let svg = L.svg();return L.semiCircle(latlng, L.extend({radius: 50000,color: '#f03',opacity: 1,renderer: svg,weight: 1}, options));},_dis(fromPoint, toPoint) {let from = turf.point(fromPoint); //[-75.343, 39.984]let to = turf.point(toPoint);let options = { units: 'kilometers' };let distance = turf.rhumbDistance(from, to, options);return distance;},_ber(fromPoint, toPoint) {let point1 = turf.point(fromPoint);let point2 = turf.point(toPoint);let bearing = turf.rhumbBearing(point1, point2);return bearing;},_drawSemiCircle(pointList, layerGroup) {let tmp = JSON.parse(JSON.stringify(pointList))console.log(JSON.stringify(pointList));let p1 = tmp[0].reverse();let p2 = tmp[1].reverse();let radius = this._dis(p1, p2);//计算第1个点和第2点前鼠标点之间的弧度let ber1 = this._ber(p1, p2);//计算第1个点和第3点前鼠标点之间的弧度let p3 = tmp[2].reverse();let ber2 = this._ber(p1, p3);console.log('radius-->' + radius + ',ber1--->' + ber1 + ',ber2--->' + ber2);if (!!radius && !!ber1 && !!ber2) {/*方式一：采用SemiCircle类库，但是无法获取到点串let scircle = this._circle(p1.reverse(), {radius: radius * 1000,color: '#2260b4',startAngle: ber1,stopAngle: ber2,weight: 4});scircle.addTo(layerGroup);*///方式二，通过计算出扇形的点位，以面的方式在地图上叠加let points = this._getSemiCirclePoints(p1.reverse(), radius / 100, ber1, ber2, 500);points[points.length] = points[0];let semiCirclePolygon = L.polygon(points);semiCirclePolygon.addTo(layerGroup)}},/**** @param center 中心点 数组 [lat, lon]* @param radius 半径* @param startAngle 起始角度* @param endAngle 终止角度* @param pointNum 圆弧上点的个数*/_getSemiCirclePoints(center, radius, startAngle, endAngle, pointNum) {let sin;let cos;let x;let y;let angle;let points = [];points.push(center);for (let i = 0; i <= pointNum; i++) {angle = startAngle + (endAngle - startAngle) * i / pointNum;sin = Math.sin(angle * Math.PI / 180);cos = Math.cos(angle * Math.PI / 180);y = center[0] + radius * cos;x = center[1] + radius * sin;points[i] = [y, x];}let point = points;point.push(center);return point;},createSemiCircle() {let pointList = [];this.semicirclegroup.clearLayers();this.map.on("click", (e) => {pointList.push([e.latlng.lat, e.latlng.lng]);this.map.on('mousemove', (ev) => {let lastPoint = pointList[pointList.length - 1];if (pointList.length === 1) {let latlngs = [lastPoint,[ev.latlng.lat, ev.latlng.lng]]this.semicirclegroup.clearLayers();L.polyline(latlngs, {color: "#03f",weight: 3}).addTo(this.semicirclegroup);} else if (pointList.length === 2) {//绘制成一个扇形let arr = JSON.parse(JSON.stringify(pointList));arr.push([ev.latlng.lat, ev.latlng.lng]);this.semicirclegroup.clearLayers();this._drawSemiCircle(arr, this.semicirclegroup);}})if (pointList.length > 2) {this.map.off('mousemove')//两点确定，移除鼠标移动事件this.map.off('click')//两点确定，移除点击事件，//绘制扇形在地图上this.semicirclegroup.clearLayers();let arr = [pointList[0], pointList[1], pointList[pointList.length - 1]];this._drawSemiCircle(arr, this.semicirclegroup);}})},

线绘制的实现

线绘制的实现思路跟上面的类似，只是多一个，这个会做一个临时图层来显示最后一段绘制的效果。

createPolyline() {let pointList = [];map.on("click", (e) => {pointList.push([e.latlng.lat, e.latlng.lng]);this.map.on('mousemove', (ev) => {//临时图层直线是最后一段线即可let lastPoint = pointList[pointList.length - 1]let latlngs = [lastPoint,[ev.latlng.lat, ev.latlng.lng]]this.tmpgroup.clearLayers();L.polyline(latlngs, {color: "#2260b4",weight: 3}).addTo(this.tmpgroup);})this.map.on('dblclick', (ev) => {this.map.off('mousemove')//两点确定，移除鼠标移动事件this.map.off('click')//两点确定，移除点击事件，pointList.push([ev.latlng.lat, ev.latlng.lng]);this.tmpgroup.clearLayers();this.semicirclegroup.clearLayers()if (pointList.length > 1) {L.polyline(pointList, {color: "#ff7800",weight: 5}).addTo(this.semicirclegroup);}})if (pointList.length > 1) {this.semicirclegroup.clearLayers();L.polyline(pointList, {color: "#ff7800",weight: 3}).addTo(this.semicirclegroup);}})
},

参考文章：
leaflet 画扇形

leaflet实现自定义线、矩形和扇形的绘制相关推荐

android 保险密码效果,本文实例为大家分享了android仿支付宝密码输入框展示的具体代码，供大家参考，具体内容如下这个没什么好分析的,就是一些基本的绘制什么线,矩形什么的,看代码更...
本文实例为大家分享了android仿支付宝密码输入框展示的具体代码,供大家参考,具体内容如下这个没什么好分析的,就是一些基本的绘制什么线,矩形什么的,看代码更具体布局文件: android:lay ...
自定义圆环（扇形）绘制
这个圆环是静态的,没有自动增加的动画绘制并不复杂,有些细节点容易搞错,这里写出来,算是做个笔记. 先放出源码,细节点,后面会说明.建议看后面的说明.最后,会进行扩展,绘制扇形需求/功能说明: 1. ...
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
【QT Graphics/View】自定义动态矩形框DyRectangle
内容待补充更多文章 [QT]自定义旋转矩形DyRotatedRectangle_俊俊的博客-CSDN博客 [QT]自定义动态同心圆DyConcentricCircle_俊俊的博客-CSDN博客 [Q ...
GoJS自定义圆角矩形的圆角角度
自定义圆角矩形的圆角角度,默认角度p1=5. go.Shape.defineFigureGenerator("RoundedRectangle", function(shape, ...
ArcGIS基础实验操作100例--实验1绘制自定义线、垂线、平行线
本实验专栏参考自汤国安教授<地理信息系统基础实验操作100例>一书实验平台:ArcGIS 10.6 实验数据: 通过百度网盘分享的文件:地理信息系统基础实验100例链接:https:/ ...
echart中拆线点的偏移_Qt中圆弧和扇形的绘制
在超声软件的开发中,超声成像模块需要绘制圆弧,例如绘制一个扇形的取样框,左右是一条直线,上下是一个圆弧,像这样. Qt中使用QPainter::drawArc绘制圆弧,使用QPainter::draw ...
Python，OpenCV鼠标事件进行矩形、圆形的绘制（随机颜色、随机半径）
Python,OpenCV鼠标事件进行矩形.圆形的绘制(随机颜色.随机半径) 1. 效果图 2. 源码参考这篇博客将介绍鼠标事件,并介绍鼠标事件矩形.圆形的绘制: 所有的鼠标事件(左键按下.左键释 ...
html5中扇形的绘制
扇形的绘制代码如下: <title>用户canvas画布绘制扇形和弧线</title> </head> <body><canvas id=&qu ...

leaflet实现自定义线、矩形和扇形的绘制

矩形绘制的实现

扇形的绘制

扇形的图形绘制有两种方式实现：

线绘制的实现

leaflet实现自定义线、矩形和扇形的绘制相关推荐

最新文章

热门文章