在 Mapbox GL JS 中线条样式通过 line 类型图层的 paint 属性配置可精确控制颜色、宽度、虚线、端点、连接、偏移、模糊、渐变、图案等效果支持固定值与数据驱动表达式。一、核心样式属性Paint1. 基础外观line-color线条颜色十六进制、RGB、RGBA、颜色名line-color: #ff0000line-width线条宽度像素默认 1line-width: 3line-opacity透明度0–1默认 1line-opacity: 0.82. 虚线与图案line-dasharray虚线样式[实线长度空白长度]单位为线宽倍数line-dasharray: [2, 4] // 短虚线line-pattern使用 Sprite 图片填充线条需提前加载 Spriteline-pattern: pattern-name3. 端点与连接line-cap端点样式butt/round/square默认 buttline-cap: roundline-join拐角连接miter/round/bevel默认 miterline-join: roundline-miter-limit尖角阈值超过自动转为 bevel默认 2line-miter-limit: 34. 偏移与模糊line-offset线条偏移像素正值向右 / 多边形内缩line-offset: 2line-blur模糊半径像素默认 0line-blur: 15. 渐变与动态样式line-gradient沿线条方向的颜色渐变需配合 line-gradient 表达式line-gradient: [ interpolate, [linear], [line-progress], 0, blue, 1, red ]数据驱动样式按属性 / 缩放动态变化line-width: [ interpolate, [linear], [zoom], 10, 1, 15, 5 ]二、完整示例使用 Sprite 图片填充线条!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleMapbox 生成可编辑高亮新线(保留所有状态)/title !-- 引入Mapbox核心库 -- link hrefhttps://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css relstylesheet script srchttps://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js/script !-- 引入Draw插件 -- link relstylesheet hrefhttps://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css / script srchttps://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js/script style * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; position: relative; } #map { width: 100%; height: 100vh; } /style /head body div idmap/div script // 替换为自己的Mapbox Access Token mapboxgl.accessToken accessToken; const map new mapboxgl.Map({ container: map, style: mapbox://styles/mapbox/streets-v12, center: [116.403874, 39.914885], zoom: 12, pitch: 0 }); // 地图加载完成后执行 map.on(load, async () { // 步骤1准备自定义图案 Sprite // 1. 加载自定义图案图片示例使用 16x16 的箭头图片你可替换为自己的图片URL const patternImageUrl ./images/1.png; // 官方示例图案 const patternName custom-arrow; // 自定义图案名称对应 line-pattern 的值 // 2. 将图片添加到 Mapbox 的 Sprite 中 try { const image new Image(); image.crossOrigin anonymous; // 解决跨域问题 image.src patternImageUrl; await new Promise((resolve) { image.onload resolve; }); // 添加图片到地图资源 map.addImage(patternName, image, { sdf: false // 非距离字段图片普通图案 }); console.log(图案加载成功:, patternName); } catch (err) { console.error(图案加载失败:, err); return; } // 步骤2添加带图案的线条图层 // 1. 添加 GeoJSON 数据源示例北京二环部分路线 map.addSource(custom-line, { type: geojson, data: { type: Feature, properties: {}, geometry: { type: LineString, coordinates: [ [116.3408, 39.9299], [116.3522, 39.9355], [116.3645, 39.9398], [116.3768, 39.9419], [116.3881, 39.9408] ] } } }); // 2. 添加使用图案的线条图层 map.addLayer({ id: pattern-line-layer, type: line, source: custom-line, paint: { // 核心使用自定义图案 line-pattern: patternName, // 辅助配置调整线条宽度影响图案显示大小 line-width: 12, // 图案透明度 line-opacity: 0.9, // 图案偏移可选 line-offset: 2 } }); // 可选添加交互效果 // 鼠标悬停时放大线条 map.on(mouseenter, pattern-line-layer, () { map.setPaintProperty(pattern-line-layer, line-width, 16); map.getCanvas().style.cursor pointer; }); map.on(mouseleave, pattern-line-layer, () { map.setPaintProperty(pattern-line-layer, line-width, 12); map.getCanvas().style.cursor ; }); }); // 添加地图控件 map.addControl(new mapboxgl.NavigationControl()); /script /body /html三、常用组合效果高亮实线line-width: 5 line-color: #ff4444 line-opacity: 1半透明虚线line-dasharray: [3, 3] line-opacity: 0.5发光线line-blur: 2 line-color: #00ffff双线条叠加两个 line 图层内层宽、外层窄并偏移