leaflet计算面积与长度以及动态计算

我这里使用的计算工具是turf库

1. 安装

npm install @turf/turf

我这里采用的是安装所有的模块，也可以安装指定的模块

npm install @turf/helpers  
npm install @turf/buffer

2.引入

完整引入
import * as turf from "@turf/turf";
或部分引入
import { along } from "@turf/along";

3.计算

计算面积

计算面积：这里的arr的格式需要为下面这种格式才行（面积的第一个坐标与最后一个坐标需要相等）
[[[125, -15],  
[113, -22],  
[154, -27],  
[144, -15],  
[125, -15],],]
const polygon = turf.polygon(arr);
const area = turf.area(polygon);

计算长度

具体方法与面积类似，turf.length(line) length这个方法还有第二个参数常用的设置计算出来的单位turf.length(line, { units: "miles" }) 这里二点miles是英里，默认是kilometers（公里）

const line = turf.lineString(arr);
const Length = turf.length(line);

4. 动态计算面积与长度

这里的leaflet图层编辑插件我使用的是leaflet-geoman-free这个插件，使用这个插件的编辑，有一个监听方法,为图层绑定这个方法.on('pm:edit', e => {})，可以实时获取编辑后的图层信息，再使用turf来计算面积或者长度，得到实时数据