WebGL绘制带箭头的线

黄坏坏

已于 2023-08-26 16:09:40 修改

阅读量353

点赞数 1

文章标签： javascript webgl vue.js

于 2023-08-21 13:41:56 首次发布

本文链接：https://blog.csdn.net/huaihuai_huang/article/details/132406534

版权

最近公司项目要求根据指定的经纬度绘制一个带箭头的线指向某个点

额外还提供了距离和角度

因为常用的技术栈为mapbox和leaflet，对比了一下两种的方法，还是选择mapbox来绘制该效果，其实leaflet也是跟mapbox相似，改一下对应的方法就行。

对于实现的第一反应是用图片，毕竟简单速度还很快,但是这个也是问题最多的一个情况，缩放级别比较小的情况下还是ok的，毕竟很多信息看不到，但是一旦放大，很多事情就暴露出来了。

第一个方法 - 使用图片绘制带箭头的线

this.map = new mapboxgl.Map({ /*自己配置*/})

// LineString类型的geojson
const markerLine = { type: 'FeatureCollection', features: []}
// 注册图片，{pointImg}位置放图片地址或者图片数据
this.map.loadImage(pointImg, (error, image) => {
    if(error) throw error;
    this.map.addImage('line-arrow', image)
})

this.map.addSource('markers-' + index, {
	type: 'geojson',
	data: markers
})
// 如果要绘制很多箭头的话，需要加上index，用来区分图层ID
this.map.addLayer({
    id: