叶子. 弯曲
A 类 传单 用于绘制贝塞尔曲线和其他复杂形状的插件 。 ()德莫尔(中文(简体) )
使用量
如果直接使用, 在叶片后包含插件 :
<script src="leaflet.js"></script>
<script src="leaflet.curve.js"></script>
(如果使用画布和动画渲染,则包括 (简体中文)tween.js 也一样。 )
如果使用Node.js,则安装并导入:
yarn add @elfalem/leaflet-curve
import L from 'leaflet' // import { curve, Curve } from 'leaflet'; // for TypeScript
import '@elfalem/leaflet-curve'
添加包含贝塞尔曲线和直线的路径 :
var path = L.curve(['M',[50.54136296522163,28.520507812500004],
'C',[52.214338608258224,28.564453125000004],
[48.45835188280866,33.57421875000001],
[50.680797145321655,33.83789062500001],
'V',[48.40003249610685],
'L',[47.45839225859763,31.201171875],
[48.40003249610685,28.564453125000004],'Z'],
{color:'red',fill:true}).addTo(map);
页:1
- 此插件基于Leaflet版本1.1.0.
- SVG渲染得到最好的支持. Canvas渲染也是可能的.
- 浏览器和设备相容性测试非常有限.
API 密码
L. Curve () 的第一个参数是一系列路径数据 。 这是由命令和坐标组成的。 命令是 SVG 路径的子集 规格。 。 。 .
| 命令 | 参数 | 说明 |
|---|---|---|
| 联合国 | [高,lng]+ | 移动到 [lat,lng] |
| L | [高,lng]+ | 线到 [lat,lng] |
| 页:1 | [lng]+ | 水平线到 [lng] |
| 五、结 论 | [正 + | 垂直线到[上] |
| C级 | ([lat1,lng1],[lat2,lng2],[lat,lng])+ | 立方贝塞尔曲线为[lat,lng],控制点为[lat1,lng1]和[lat2,lng2] |
| 页:1 | ([拉特2,lng2], [拉特,lng])+ | 立方贝塞尔曲线为[lat,lng],控制点为上个曲线的第二个控制点[lat1,lng1]和[lat2,lng2] |
| Q 问 | ([拉特1,lng1], [拉特,lng])+ | 四边形贝塞尔曲线为[lat,lng],控制点为[lat1,lng1] |
| T级 | ([拉特,lng])+ | 四边形贝塞尔曲线至[lat,lng],控制点为上个曲线的控制点[lat1,lng1] |
| 页:1 | 关闭路径( 线到 M) |
注意只执行绝对命令(上). 可以将椭圆弧(command 'A')与贝塞尔曲线(the elliptical-arc 分支执行此命令, 如果您有兴趣的话).
这个 L.Curve 类扩展 L.Path 因此从 L.Path 备有。 以下新方案和方法由下列部门提出: L.Curve。 。 。 .
选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 动画 | 整数或动画选项对象 | undefined | 动画曲线. 它需要一个参数,这个参数是提供给 options 参数 元素. animate( ) 方法。 注:网络动画 API 支持 变化 横跨浏览器. |
方法
| 方法 | 回返 | 说明 |
|---|---|---|
设置Path ()pathData[](中文(简体) ) | this | 用给定的命令和坐标数组替换当前路径. |
| 获取 Path () | pathData[] | 返回路径中命令和坐标的数组. |
设置LatLngs(pathData[](中文(简体) ) | this | 无法使用此. setPath ()pathData[])使用L.Polyline和其他Leaflet组件的命名公约. |
| 获取LatLngs () | pathData[] | 别用 L. Polyline 和其他Leaflet 组件的命名常规来定义 . |
跟踪( r)samplingDistance[](中文(简体) ) | latLng[] | 返回在给定距离上位于曲线上的点数组。 采样距离是0到1相容的十进制值,被应用于曲线的每个段(即命令). 见 德莫尔 举个例子. |
许可证
麻省理工学院
捐款
- 欢迎虫子报告和拉出请求!