leaflet-线的绘制与带箭头的线

终归墟

已于 2022-03-15 16:47:57 修改

阅读量6.5k

点赞数 2

分类专栏： leaflet的使用历程文章标签： linq p2p c#

于 2022-03-15 16:41:06 首次发布

本文链接：https://blog.csdn.net/s_9527_s/article/details/123503904

版权

leaflet的使用历程专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Leaflet库在地图上绘制线，并重点讲解了利用leaflet-polylinedecorator插件来添加箭头指示方向的方法。通过创建图层组，设置经纬度，使用setLatLngs方法来改变或重新绘制线条，以及隐藏或清除线条的操作。当需要显示线条方向时，可以引入并应用该插件，如果npm下载不便，可以直接从CSDN下载资源并引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建空的图层组

this.xiangroup = L.featureGroup([]) //创建图层
this.map.addLayer(this.xiangroup)

2.绘制,使用L.polyline（记住两点一线，如果只有一个点的经纬度，是没有线的）

var latlngs = [ //线中点的经纬度点
    [38, 0],
    [38, 180],
    [0, 0]
]
this.polyline = L.polyline(latlngs, {
    color: 'red',//线的颜色
    weight: 3 //线的粗细
}).addTo(this.xiangroup);

3 .如果要对线进行重新绘制，或者改变可以使用setLatLngs方法

//this.polyline是上面已经绘制好的线
//latlngs为这条线的各个新经纬度点
this.polyline.setLatLngs(latlngs)

如果要让线隐藏或清空，可以将latlngs设为[] 就可以了。当然也可以清空图层重新绘制，看需求操作。

4.带箭头的线
需求中需要标记方向时，可以引入leaflet中的leaflet-polylinedecorator插件来实现

npm install leaflet-polylinedecorator

5.在需要的页面引入

import 'leaflet-polylinedecorator'

var latlngs = [ //线中点的经纬度点
    [38, 0],
    [38, 180],
    [0, 0]
]
this.polyline = L.polyline(latlngs, {
    color: 'red',//线的颜色
    weight: 3 //线的粗细
}).addTo(this.xiangroup);
L.polylineDecorator(this.polyline, {
	patterns: [{
		offset: 30, // 箭头起始位置距离线条两端的距离
		repeat: 100, // 箭头重复的间隔
		symbol: L.Symbol.arrowHead({
			pixelSize: 10, // 箭头大小
			headAngle: 75, // 箭头角度
			polygon: false,//箭头是否为多边形
			pathOptions: {
				// stroke: true,
				weight: 2,//箭头粗细
				color: 'blue'//箭头颜色
			}
		})
	}]
}).addTo(this.xiangroup);