// 添加多条路线
addMultiLineString(data) {
mapboxMap.map.getLayer("multiLineLayer") &&
mapboxMap.map.removeLayer("multiLineLayer");
mapboxMap.map.getSource("multiLineSource") &&
mapboxMap.map.removeSource("multiLineSource");
let features = [];
let linerArr = [];
for (let index = 0; index < data.length; index++) {
let color = "";
if (data[index].channelType === "51") {
color = "#92F7F4";
} else if (data[index].channelType === "52") {
color = "#70B603";
} else if (data[index].channelType === "53") {
color = "#EC808D";
} else if (data[index].channelType === "54") {
color = "#1195db";
} else if (data[index].channelType === "55") {
color = "#f4ea29";
}
features.push({
type: "Feature",
id: index,
geometry: JSON.parse(data[index].geom),
properties: {
...data[index],
color: color,
},
});
linerArr.push(JSON.parse(data[index].geom));
}
mapboxMap.map.addSource("line", {
type: "geojson",
data: {
type: "FeatureCollection",
features: features,
},
});
mapboxMap.map.addLayer({
type: "line",
source: "line",
id: "multiLineLayer",
paint: {
"line-color": ["get", "color"],
"line-width": 6,
},
});
mapboxMap.map.addLayer({
type: "line",
source: "line",
id: "line-dashed",
paint: {
"line-color": "white",
"line-width": 2,
"line-dasharray": [0, 3, 3],
},
});
const dashArraySequence = [
[0, 3, 3],
[0.5, 4, 2.5],
[1, 4, 2],
[1.5, 4, 1.5],
[2, 4, 1],
[2.5, 4, 0.5],
[3, 4, 0],
[0, 0.5, 3, 3.5],
[0, 1, 3, 3],
[0, 1.5, 3, 2.5],
[0, 2, 3, 2],
[0, 2.5, 3, 1.5],
[0, 3, 3, 1],
[0, 3.5, 3, 0.5],
];
let step = 0;
function animateDashArray(timestamp) {
// Update line-dasharray using the next value in dashArraySequence. The
// divisor in the expression `timestamp / 50` controls the animation speed.
const newStep = parseInt((timestamp / 50) % dashArraySequence.length);
if (newStep !== step) {
mapboxMap.map.setPaintProperty(
"line-dashed",
"line-dasharray",
dashArraySequence[step]
);
step = newStep;
}
// Request the next frame of the animation.
requestAnimationFrame(animateDashArray);
}
// start the animation
animateDashArray(0);
this.addArrowIcon(features);
mapboxMap.map.off("click", "multiLineLayer", this.popupEvent);
mapboxMap.map.on("click", "multiLineLayer", this.popupEvent);
},
// 添加箭头
addArrowIcon(features) {
if (mapboxMap.map.getSource("icon")) {
mapboxMap.map.removeLayer("arrowLayer");
mapboxMap.map.removeSource("icon");
mapboxMap.map.removeImage("arrow");
}
mapboxMap.map.loadImage(
require("../../../../../static/img/arrorw.png"),
(error, image) => {
if (error) throw error;
mapboxMap.map.addImage("arrow", image);
mapboxMap.map.addSource("icon", {
type: "geojson",
data: {
type: "FeatureCollection",
features,
}, // 轨迹geojson格式数据
});
mapboxMap.map.addLayer({
id: "arrowLayer",
type: "symbol",
source: "icon",
layout: {
"symbol-placement": "line",
"symbol-spacing": 1, // 图标间隔,默认为250
"icon-image": "arrow", // 箭头图标
"icon-size": 0.3,
},
});
}
);
},