贴图动画失效问题

[test-vue]

问题描述

LineLayer 贴图动画达到某个放大等级时，贴图动画失效问题，只要不超过等级 动画正常，超过动画失效

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[petercat-assistant]

您提到的关于 LineLayer 贴图动画在某个放大等级失效的问题，似乎是一个特定条件下的动画渲染问题。为了更好地帮助您解决这个问题，我建议您可以尝试以下步骤：

1. 检查浏览器控制台：在动画失效时，查看浏览器的控制台是否有任何错误信息。这可能会提供一些关于问题根源的线索。

2. 缩小问题范围：尝试在不同的浏览器和操作系统上重现问题，以确定问题是否与特定的环境有关。

3. 更新依赖：确保您使用的是 antvis/L7 的最新版本，因为问题可能已经在更新中得到解决。

4. 提供更多信息：如果可能，请提供一个最小可重现的代码示例，这样可以更容易地诊断问题。

如果您愿意，我可以帮助您在 antvis/L7 的 GitHub 仓库中搜索是否有类似的问题报告，或者帮助您创建一个新的问题报告。请告诉我您的决定。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[github-actions]

hi @test-vue, welcome!

[github-actions]

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

[test-vue]

示例代码：

<script> import { LineLayer, PointLayer, Scene } from '@antv/l7'; import {Map} from '@antv/l7-maps'; export default { name: 'testMap', data() { return {}; }, methods: { initMap() { const scene = new Scene({ id: 'map', map: new Map({ pitch: 40, center: [40, 40.16797], style: 'dark', zoom: 2.5, }), }); scene.addImage('plane', 'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'); scene.on('loaded', () => { Promise.all([ fetch('https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json').then((d) => d.json()), fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then((d) => d.text()), fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then((d) => d.text()), ]).then(function onLoad([world, dot, flyline]) { const dotData = eval(dot); // @ts-ignore const flydata = eval(flyline).map((item) => { // @ts-ignore const latlng1 = item.from.split(',').map((e) => { return e * 1; }); // @ts-ignore const latlng2 = item.to.split(',').map((e) => { return e * 1; }); return { coord: [latlng1, latlng2] }; }); const worldLine = new LineLayer().source(world).color('#41fc9d').size(0.5).style({ opacity: 0.4, }); const dotPoint = new PointLayer() .source(dotData, { parser: { type: 'json', x: 'lng', y: 'lat', }, }) .shape('circle') .color('#ffed11') .animate(true) .size(40); const flyLine = new LineLayer({ blend: 'normal' }) .source(flydata, { parser: { type: 'json', coordinates: 'coord', }, }) .color('#ff6b34') .texture('plane') .shape('arc') .size(15) .animate({ duration: 1, interval: 0.2, trailLength: 0.05, }) .style({ textureBlend: 'replace', lineTexture: true, // 开启线的贴图功能 iconStep: 10, // 设置贴图纹理的间距 }); const flyLine2 = new LineLayer() .source(flydata, { parser: { type: 'json', coordinates: 'coord', }, }) .color('#ff6b34') .shape('arc') .size(1) .style({ lineType: 'dash', dashArray: [5, 5], opacity: 0.5, }); scene.addLayer(worldLine); scene.addLayer(dotPoint); scene.addLayer(flyLine2); scene.addLayer(flyLine); }); }); scene.on('zoom', (e) => { const level = parseFloat(e.target.getZoom().toFixed(2)); console.log('====当前等级=======', level); }); }, }, mounted() { this.initMap(); }, }; </script> <style lang="scss" scoped> .map-container { width: 100%; height: 100%; position: relative; } </style>

[test-vue]

放到等级 达到12 就会出现此问题