Mapbox加载带有箭头方向的线

最新推荐文章于 2025-04-16 15:22:24 发布

ponGISer

最新推荐文章于 2025-04-16 15:22:24 发布

阅读量808

点赞数

分类专栏： mapbox 文章标签： javascript mapbox 箭头线

本文链接：https://blog.youkuaiyun.com/u011332271/article/details/132695770

版权

mapbox 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Maobox在Mapbox地图上分步加载线数据和箭头图标，通过GeoJSON格式定义线路和箭头特征，并设置相应的样式和间距。

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

1、Maobox加载带有箭头放心的线，需要分别加载线数据和箭头icon数据；

2、mapbox先加载线数据：

// 加载轨迹线数据  
function addRoutelayer() {
    map.addLayer({
        'id': 'routeLayer',
        'type': 'line',
        'source': {
            'type': 'geojson',
            'lineMetrics': true,
            'data': {
                type: "FeatureCollection",
                features: [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': [
                                [116.391844, 39.898457],
                                [116.377947, 39.898595],
                                [116.366892, 39.947263],
                                [116.387537, 39.947568],
                                [116.401988, 39.947764],
                                [116.410824, 39.947929],
                                [116.42674, 39.947558],
                                [116.427338, 39.9397],
                                [116.405321, 39.906622],
                                [116.394954, 39.906324],
                                [116.391264, 39.906308],
                            ]
                        }
                    }],
            }
        },
        'paint': {
            'line-width': 5,
            'line-opacity': 1,
            'line-color': '#009EFF',
        }
    });
}

3、mapbox加载箭头数据：

// 加载箭头数据
function addArrowlayer() {
    map.addLayer({
        'id': 'arrowLayer',
        'type': 'symbol',
        'source': {
            'type': 'geojson',
            'lineMetrics': true,
            'data': {
                type: "FeatureCollection",
                features: [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'LineString',
                            'coordinates': [
                                [116.391844, 39.898457],
                                [116.377947, 39.898595],
                                [116.366892, 39.947263],
                                [116.387537, 39.947568],
                                [116.401988, 39.947764],
                                [116.410824, 39.947929],
                                [116.42674, 39.947558],
                                [116.427338, 39.9397],
                                [116.405321, 39.906622],
                                [116.394954, 39.906324],
                                [116.391264, 39.906308],
                            ]
                        }
                    }],
            }
        },
        'layout': {
            'symbol-placement': 'line',
            'symbol-spacing': 50,  // 图标间隔，默认为250
            'icon-image': 'arrowIcon', //箭头图标
            'icon-size': 0.5,
            'icon-rotate': 90
        }
    });
}

4、其中箭头icon图标：