Leaflet：Path、Polyline、Polygon、Rectangle、Circle、CircleMarker

下边介绍Vector Layer

Path（Layer）

Path是其他Vector Layer的父类，比如Polyline、Polygon、Rectangle、Circle、CircleMarker...，虽然我们不直接用Path类，但是它的属性和方法我们需要了解。

1、参数

stroke     //是否画边界，默认True，在画Circle和Polygon时很有用
color        //Stroke的color
weight     //Stroke的线宽
opacity     //Stroke透明度
dashArray //画图过程中虚线的样式
fill             //是否填充内部，常用于Circle、Polygon
fillColor    //颜色
fillOpacity//透明度
bubblingMouseEvents //默认true，当为true时，发生在该Path上的鼠标事件也将触发在Map上的相同事件

2、方法

setStyle(<Path options>style) //重设一些参数来让该Path表现为一些新样式
bringToFront() //把该Path Layer放在所有Path Layer之上
bringToBack() //把该Path Layer放在所有Path Layer之下

Polyline(Path)(Layer)

地图上的折线

1、用例

①从一组LatLng中创建一个折线

//从一组LatLng(所有LatLng对象都可以用数组[x,y]代替)中得到一条折线对象
var latlngs=[
    [45,-122],
    [37,-122],
    [34,-118]
];

var polyline = L.polyline(latlngs,{color:'red'}).addTo(map);

//缩放地图视角到该Polyline上
map.fitBounds(polyline.getBounds());

②从一组多维数组创建多条折线，一个多维数组代表一条折线，这多条折线实际上是一个polyline对象

var latlngs = [
    [[45.51, -122.68],
        [37.77, -122.43],
        [34.04, -118.2]],
    [[40.78, -73.91],
        [41.83, -87.62],
        [32.76, -96.72]]
];
var polyline=L.polyline(latlngs,{color:'red'}).addTo(leafletMap);
leafletMap.fitBounds(polyline.getBounds())；

这个Array包含两个多维数组，绘制出来就是两条折线，每个多维数组对应一条折线。与用例①不同的是这两条折线的总体表示polyline。

2、实例化

L.polyline(<LatLng[]>latlngs,<Polyline options>options?)

3、参数

smoothFactor //光滑程度 默认1
noClip //禁用polyline clipping，默认false；暂未知功能如何

4、方法

getLatLngs() //返回LatLng[]，一组点的数组，如果是多条折线则返回一个嵌套数组
setLatLngs(<LatLng[]>latlngs) //用给定的点替代原来的点绘制新线
closestLayerPoint(<Point>p) //返回Polyline中离点p最近的点
getCenter() //返回Polyline的中心坐标
getBounds()//返回该Polyline所在的Bound，配合Map的fitBounds方法可以定位到该Polyline
addLatLng(<LatLng>latlng,<LatLng[]>latlng?)//向Polyline中加入一个点

Polygon(Polyline)

多边形

通过一系列Points创建多边形，并不需要额外写一个和开始点相同的最终点。

1、用例

①创建一个红色的多边形

var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];

var polygon = L.polygon(latlngs , {color:'red'}).addTo(map);

map.fitBounds(polygon.getBounds())

②环形——两个Polygon之间的环形区域

需要两个Point数组，第一个表示外Polygon，第二个表示内Polygon

写法是：

var latlngs= [
    [外Polygon 的Points Array],
    [内Polygon 的Points Array]
];

var latlngs = [
  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
  [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
];

③多多边形——MultiPolygon

和多折线一样，如果用多维数组表示，那么显示出来的是多个多边形，但是这多个多边形的整体是一个Polygon

写法：

var latlngs =[

[第一个多边形]，

[第二个多边形]

];

        var latlngs = [
            [ // first polygon
                [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring
                [[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole
            ],
            [ // second polygon
                [[41, -111.03], [45, -111.04], [45, -104.05], [41, -104.05]]
            ]
        ];

2、初始化

L.polygon(<LatLng[]>latlngs, <Polyline options>options?)

3、参数

没有特有参数，参数继承自Polyline、Path、Layer

4、方法

没有特有方法，继承自Polyline、Path、Layer

Rectangle(Polygon)

1、用例

//定义一个Bounds 左上角和右下角的坐标
var bounds=[[54.559322, -5.767822], [56.1210604, -3.021240]]
//创建Rectangle
L.rectangle(bounds,{color:'#ff7800',weight:1}).addTo(map);
//将Map缩放到该Rectangle处
map.fitBounds(bounds);

2、初始化

L.rectangle(<LatLngBounds> latlngBounds, options?)

3、参数

同Polygon

4、方法

setBounds(<LatLngBounds>latlngBounds) //在设置的Bounds处重画该Rectangle

其他方法继承自Polygon

Circle（CircleMarker）

1、用例

L.circle([50.5,30.5],{radius:200}).addTo(map)

2、初始化

L.circle(<LatLng>latlng ,<Circle options>options) //可选参数options中必须要有参数radius，即半径

3、参数

radius //圆半径，单位m

其他参数继承自Path

4、方法

setRadius(n) //重设半径
getRadius() //返回半径
getBounds() //返回LatLngBounds

setRadius、setStyle、setLatLng对于Circle的修改结果会立刻显示在Map上而不需要redraw()。

其他方法继承自CircleMarker、Path、Layer

CircleMarker(Path)

一个始终与整个Map保持相对尺寸（以pixel为空单位）的Circle，区别于Circle就是Circle是绝对尺寸（以m为单位），当你放大地图时Circle会变小，因为它与地图的相对尺寸变小了；而CircleMarker不论你怎么缩放地图，它在地图都始终是那么大：

下图分别是同一个CircleMarker，但是地图的缩放等级是不同的。

1、初始化

L.circleMarker(<LatLng>latlng ,<CircleMarker options>options?)

2、参数

radius //半径，单位像素

3、方法

setLatLng(<LatLng>latlng) //布置该CircleMarker到新位置上
getLatLng()
setRadius(n)
getRadius()

还有继承自Path、Layer的方法