leaflet 地图简笔画 -- leaflet-freedraw 的使用

        以前，在地图上画多边形一直使用的是Leaflet.draw这个组件，中规中矩的，使用起来也是挺不错的，后来发现了leaflet-freedraw，这个组件是在地图上进行一笔画，一笔下来就可以完成一个多边形，用起来更流畅，和Leaflet.draw各有千秋，今天主要说一下leaflet-freedraw的使用方法，关于leaflet-freedraw的详细信息，可以搞GitHub上查看。

一、安装组件

npm i leaflet-freedraw

或

yarn add leaflet-freedraw

二、使用组件

1、在使用页面引入

import FreeDraw, { CREATE, EDIT, APPEND, NONE } from "leaflet-freedraw";

2、相关代码

<div class="map" id="mapContainer" @keydown.space="onKeyDown" @keyup.space="onKeyUp"></div>

   //按下空格键，设置mode为none，可拖动地图
    onKeyDown() {
      this.freeDraw && this.freeDraw.mode(NONE);
    },
    //松开空格键，重新设置mode，即可再次画图
    onKeyUp() {
      this.freeDraw && this.freeDraw.mode(CREATE | EDIT | APPEND);
    },
    //清除
    clearFreeDraw() {
      if (this.freeDraw) {
        this.freeDraw.mode(NONE);
        this.freeDraw.clear();
      }
    },
    /**
     * 初始化
     */
    initFreeDraw() {
      if (this.freeDraw) {
        this.freeDraw.mode(CREATE | EDIT | APPEND);
      } else {
        this.freeDraw = new FreeDraw({
          maximumPolygons: 1,//最多可以画几个多边形
          mode: CREATE | EDIT | APPEND,//类型
          strokeWidth:3,//线的宽度
        });
        this.map.addLayer(this.freeDraw);
        this.freeDraw.on("markers", (event) => {
          if (event.latLngs.length > 0) {
            //这里可以获取到所画图形的坐标点集合
            this.clearFreeDraw();
          }
        });
      }
    },

3、效果如下：

这个组件用法相对简单，还有一些其他的配置，大家可以到leaflet-freedraw文档中查看