1000多条弧线图，如何在没有gpu的电脑上不卡顿

[lsk222]

• L7 Version: 2.20.10
• Platform:window
• Mini Showcase(like screenshots):
• 
• CodePen Link:
  ``

加上飞线图的动效，没有GPU的电脑或者GPU很差的话就会很卡，浏览器直接卡死
` useEffect(() => {
if (!scene || !dotData.length || !line.length || !marker.length) return;
scene.removeAllLayer();
const dotPoint = new PointLayer({ zIndex: 3 })
.source(dotData, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
.shape("circle")
.color("#ffed11")
.animate(true)
.size(15);

// @ts-ignore
const flydata = line;
console.log('line---->num', line)

const flyLine2 = new LineLayer({ zIndex: 4, blend: 'normal',  autoFit: false})
  .source(flydata, {
    parser: {
      type: "json",
      coordinates: "coord",
    },
  })
  .shape("arc")
  // .active(true)
  .size(2)
  .style({
    lineType: "solid",
    // dashArray: [5, 5],
    opacity: 0.5,
    segmentNumber: 10
  });
  console.log('line---->num', flydata)

flyLine2.color("value", (value) => {
  return getLineColor(value);
});
flyLine2.size("value", (value) => {
  return getLineWidth(value);
});

const flyLine = new LineLayer({ blend: "normal", zIndex: 5 })
  .source(flydata, {
    
    parser: {
      type: "json",
      coordinates: "coord",
    },
  })
  .color("#ff6b34")
  .texture("arrow")
  .shape("arc")
  .size(15)
  .animate({
    duration: 2,
    interval: 1,
    trailLength: 10,
  })
  .style({
    segmentNumber: 10,
    textureBlend: "replace",
    lineTexture: true, // 开启线的贴图功能
    iconStep: 30, // 设置贴图纹理的间距
  });



flyLine2.style({
  opacity: {
    field: "value",
    value: [0.5, 1, 1, 1, 1],
  },
});

flyLine.on("mousemove", (val) => {
  const { data } = val.feature;
  let offsetx = 0;
  const offsety = 0;
  let anchorPosition = "bottom";
  if (val.x - 400 < 250) {
    offsetx = 245;
    anchorPosition = "left";
  }
  if (val.x + 250 >= 1520) {
    offsetx = -245;
    anchorPosition = "right";
  }
  if (val.y - 245 <= 210) {
    anchorPosition = "top";
  }
  if (val.y - 245 <= 100 && val.x - 400 < 250) {
    anchorPosition = "top-left";
  }
  if (val.y - 245 <= 100 && val.x + 250 >= 1520) {
    anchorPosition = "top-right";
  }

  if (popUpRef?.current) {
    scene.removePopup(popUpRef.current);
    popUpRef.current = null;
  }

  const htmlStr = ``

  console.log("---->anchorPosition", anchorPosition);
  const popOptions = {
    anchor: anchorPosition,
    closeButton: false,
  };
  const popUpTemp = new Popup(popOptions);
  popUpRef.current = popUpTemp;
  popUpTemp.setLngLat([val.lngLat.lng, val.lngLat.lat]);
  popUpTemp.setHTML(htmlStr);
  // popUpTemp.addTo(scene);
  scene.addPopup(popUpTemp);
  setArrowClass(getArrowClass(anchorPosition));
});

flyLine.on("mouseout", (val) => {
  scene.removePopup(popUpRef.current);
  popUpRef.current = null;
});

const pointLayer = new PointLayer({zIndex: 8, blend: 'normal' })
.source(marker, { parser: { type: "json", x: "lng", y: "lat" } })
.shape("name", "text")
// .shape("triangle")
.size(16)
.color("#fff")
.style({
  textOffset: [-10, 15],
  // stroke: '#000', // 描边颜色
  // strokeWidth: 0.1, // 描边宽度
  // strokeOpacity: 0.6,
})
scene.addLayer(dotPoint);
scene.addLayer(flyLine2);
scene.addLayer(flyLine);
scene.addLayer(pointLayer);


//  pointLayer.show()
// lineLayerRef.current = [dotPoint, flyLine, flyLine2, pointLayer];

}, [scene, line, dotData, marker]);
`

[github-actions]

hi @lsk222, welcome!

[github-actions]

Hi @lsk222, Please star this repo if you find it useful! Thanks ⭐!
你好～ @lsk222 🌟 如果这个仓库对你有帮助，可以给我们点个star支持一下～你的支持对我们来说是最大的鼓励，感谢你的支持与点赞 🌟

[lvisei]

@lsk222 弧线图的耗时逻辑放 GPU 了，因这部分逻辑放 GPU 性能比 CPU 好很多，在没有显卡或独显的电脑上，在 CPU 执行性能不太行。