本章主要介绍leaflet添加polyline,polygon,rectangle,circle,circleMarker等矢量图层
leaflet 详情总目录:传送
这些都是基础的矢量图层,上面几个图层的属性都继承path,这里不过多叙述直接上代码吧,后面再对其中个别属性做一下详解:
let latlngs1 = [[29.4785541, 119.55847441],[29.4765541, 119.55847441],[29.4745541, 119.55847441],[29.4725541, 119.55647441]]let latlngs2 = [[[29.4805541, 119.55847441],[29.4825541, 119.55847441],[29.4845541, 119.55847441]],[[29.4655541, 119.55647441],[29.4675541, 119.56547441]]]L.polyline(latlngs1,{stroke:true,//是否绘制边框color:'#3388ff',//边框颜色weight:3,//边框宽度opacity:1.0,//边框透明度lineCap:'round',//结束时线的形状,这里默认即可lineJoin:'round',//转角时线的形状,这里默认即可dashArray:'',//定义线的形状fill:'',//是否填充fillColor:'',//填充颜色fillOpacity:1.0,//填充透明度}).addTo(this.map);//一段L.polyline(latlngs2,{color:'red'}).addTo(this.map)//两段线//简单多边形let latlng3 = [[29.5805541, 119.57847441],[29.5895541, 119.57347441],[29.5895541, 119.57447441],[29.5835541, 119.57447441]]L.polygon(latlng3).addTo(this.map)//复制多边形,包含孔洞,第一个区域是外层区域,第二个开始都是内层孔洞let latlng4 = [[[29.5005541, 119.50847441],[29.5305541, 119.51847441],[29.5605541, 119.52847441],[29.5605541, 119.53847441],[29.5305541, 119.54847441]],[[29.5105541, 119.51847441],[29.5205541, 119.52047441],[29.5305541, 119.52647441]]]L.polygon(latlng4).addTo(this.map)//矩形let latlng5 = [[29.6105541, 119.59847441],[29.6505541, 119.68847441]]L.rectangle(latlng5).addTo(this.map)//圆形 在地图上显示的圆形是个椭圆,因为投影的问题,越接近两极圆形失真越严重L.circle([29.6205541, 119.4847441],{radius:100//单位米}).addTo(this.map)//圆形markerL.circleMarker([29.6105541, 119.46847441],{radius:10//单位像素}).addTo(this.map)
上面都是一些常用的属性,至于图层的方法,都继承layer图层,和layer图层方法基本一致,没有增加什么复制的方法
主要讲解一下dashArray这个属性:该属性是定义线条的样式的,直接看效果更清晰。(这里面的数值我都给的很大,为了方便查看效果)
dashArray为1个数时,则线条样式为间隔和实线大小一致;
dashArray为2个数时,则第一个数是实线长度,第二个数是空格长度;
dashArray为3个数时,则以实线,空格这样的格式来定义
dashArray为4个数时,和2个数时一样的,只是以4个数来重复执行;
其他的方法或者属性可以到官网去查看:path