ol地块闪烁,渐变,呼吸灯效果实现

在openlayers实现很多矢量渲染时,可能会有用户提出多边形高亮,多边形闪烁等动态显眼的地图图形渲染方式,因此本文来提供给大家一些思路。

先来看第一个例子:

1.多边形闪烁

其实闪烁的思路就是设置一个时间,让两种样式交替渲染图层,于是我们要用到setInterval,

通过setInterval,每隔500ms设置一次图层的style,利用setStyle方法重新给矢量图层定义style,就能实现动态的改变矢量图层的style。当然也还有其他很多的思路可以做到这个效果,在这里我就举一种最简单的最好理解 的方法。

//代码基于vue环境,其他环境可根据规则适当调整
//1.加载矢量图层

 addGeoJson(){
    this.geojsonObject=wuyi;
    let features = new GeoJSON().readFeatures(this.geojsonObject)
      const vectorSource = new VectorSource()
      vectorSource.addFeatures(features)
      this.lsLayer = new VectorLayer({
        source: vectorSource,
        id: "lsLayer",
        zIndex: 39999,
        style: new Style({
        stroke:new Stroke({
          width:3,
          color:'red'
        }),
        fill:new Fill({
          color:'white'
        })
      })

版权声明:本文为lz5211314121原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。