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的方法

posted @   ShineLe  阅读(7738)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示