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的方法
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性