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

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(