加载线和线背景样式
!map.getSource('roadItemLineSource') &&
map.addSource('roadItemLineSource', {
type: 'geojson',
data: geoJson,
lineMetrics: true,
});
!map.getLayer('roadItemLine') &&
map.addLayer(
{
type: 'line',
source: 'roadItemLineSource',
id: 'roadItemLine',
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': lineColor,
'line-width': lineWidth,
'line-opacity': 0.8,
},
},
beforeId,
);
!map.getLayer('line-background') &&
map.addLayer(
{
type: 'line',
source: 'roadItemLineSource',
id: 'line-background',
paint: {
'line-color': '#666666',
'line-width': lineWidthBack,
'line-opacity': 0.4,
},
},
beforeId,
);
加载箭头
const svgXML = `<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d="M870.334 514.725l-713.943 419.15 205.529-424.557-208.254-419.193z" />
</svg>`;
const svgBase64 =
'data:image/svg+xml;base64,' +
window.btoa(unescape(encodeURIComponent(svgXML)));
const arrowIcon = new Image(20, 20);
arrowIcon.src = svgBase64;
arrowIcon.onload = function () {
!map.hasImage('arrowIcon') && map.addImage('arrowIcon', arrowIcon);
!map.getLayer('roadArrowLayer') &&
map.addLayer(
{
id: 'roadArrowLayer',
type: 'symbol',
source: 'roadItemLineSource',
layout: {
'symbol-placement': 'line',
'symbol-spacing': config
? 30
: [
'interpolate',
['exponential', 0.5],
['zoom'],
6,
20,
12,
10,
15,
50,
17,
100,
], // 图标间隔,默认为250
'icon-image': 'arrowIcon', //箭头图标
'icon-size': iconSize,
'icon-allow-overlap': config ? true : false, //图标允许压盖
},
},
beforeId,
);
};