mapbox绘制一条闪烁的线

最新推荐文章于 2024-07-23 02:48:14 发布

有玉微凉，是为樱琅

最新推荐文章于 2024-07-23 02:48:14 发布

阅读量466

点赞数 1

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

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

版权

mapbox+leaflet 专栏收录该内容

62 篇文章 10 订阅

订阅专栏

本文介绍了如何使用WebGIS中的setInterval和setPaintProperty函数实现图层颜色的定时切换，以及如何针对特定要素改变颜色，通过flashing状态控制。

摘要由CSDN通过智能技术生成

贴个群号

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 }
  );