mapbox绘制一条闪烁的线

有玉微凉，是为樱琅

于 2024-04-28 10:55:55 发布

阅读量386

点赞数 1

分类专栏： mapbox+leaflet 文章标签： mapbox 前端 gis vue

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/138270687

版权

mapbox+leaflet 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家

效果图

当然我这个稍微略显夸张了，五颜六色的…
在这里插入图片描述

原理与源码

这里提供一种思路，其实是利用了setInterval和setPaintProperty，每隔一段时间重新绘制颜色就可以，这里简单写一下，主要是个思路，这里是整个图层改变颜色

         let count = true
         let interTm=setInterval(()=>{
            if(count == true){
                map.setPaintProperty(
                    '你的图层ID',
                    'line-color',
                    '#FFFFFFF'
                );
                count = !count
            }else{
                map.setPaintProperty(
                    '你的图层ID',
                    'line-color',
                    '#000000'
                );
                count = !count
            }
        },1000)

当然也可以指定图层中的某一个要素，利用上面的这种写法，根据改变flashing状态来改变具体某个要素的颜色

//定义图层的时候
  'line-color': [
      'case',
      ['boolean', ['feature-state', 'flashing'], false],
      'rgb(0,255,255)',
      '#ffffff'
  ],
  //改变flashing状态
  map.setFeatureState(
      { source: sourceID, id: featureID },
      { flashing: true }
  );