抽空开发一个leaflet量测工具库,比较轻量化,傻瓜式调用,已上传至npm,欢迎使用。
点个star
leaflet-measure-simplify
一个轻量化leaflet的测量插件,或者你也可以关闭量测结果显示,它将成为一个绘制工具。
使用
安装
npm install leaflet-measure-simplify
ESM
import LeafletMeasureSimplify from "leaflet-measure-simplify";
import "leaflet-measure-simplify/dist/leaflet-measure-simplify.css";
UMD
<link rel="stylesheet" href="leaflet-measure-simplify/dist/leaflet-measure-simplify.css">
<script src="leaflet-measure-simplify/dist/leaflet-measure-simplify.umd.cjs"></script>
Example
let measureTools = new LeafletMeasureSimplify(map,{
weight:3,
color:"red",
//...
});
measureTools.distance().then(path=>{
console.log(path)//绘制完成后将返回路径
})
类参数
参数名 | 类型 | 默认值 | 说明 |
---|
map | Object | 无 | leaflet地图对象 |
options | Object | 见下表 options选项 | 配置选项 |
options选项
属性名 | 类型 | 默认值 | 说明 |
---|
color | String | #039bec | 主题色 |
weight | Number | 3 | 线条宽度 |
showTip | Boolean | true | 是否显示操作提示 |
showResult | Boolean | true | 是否显示测量结果 |
unitDistance | String | kilometer | 距离测量单位(kilometer:千米/metre:米) |
unitArea | String | kilometer | 面积测量单位(kilometer:平方千米/metre:平方米) |
precisionDistance | Number | 2 | 距离测量精度 |
precisionArea | Number | 2 | 面积测量精度 |
precisionCoord | Number | 6 | 经纬度测量精度 |
tipLanguage | Object | zh-CN | 语言(zh-CN:中文/en-US:英文) |
customTip | Object | - | 自定义操作提示 例如:{“step1”:“单击开始绘制”,“step2”:“单机继续绘制”,“step3”:“右键单击结束绘制”} |
实例方法
方法名 | 返回值 | 说明 |
---|
distance | Promise | 距离测量|Function(path) |
area | Promise | 坐标测量|Function(path) |
coord | Promise | 坐标测量|Function(coord) |
close | - | 关闭已经开始的测量 |
clear | - | 清除测量结果 |