vue+openLayers闪烁图形/线段/点 都可以使用类似的方法_openlayers 闪烁点

本文使用闪烁图形作为实例，线段和点都是类似的原理

基础方法
1.先定义两个样式，闪烁时两个样式相互交换
2.利用定时器（单数的时候样式一，双数的时候样式二）由此来实现闪烁效果

先给主要代码如下（最后有全部代码）：

var features = [];
// 闪烁方法
  let interval;
  var flashStyle1 = new olStyle.Style({
    //边框样式
    stroke: new olStyle.Stroke({
      color: 'red',
      width: 4,
    }),
  })
  var flashStyle2 = new olStyle.Style({
    //边框样式
    stroke: new olStyle.Stroke({
      color: 'blue',
      width: 5,
    }),
  })
  //停止闪烁的标志
  let flag = 0;
  interval && clearInterval(interval);
  //闪烁方法对象
  interval = setInterval(
    function () {
      //闪烁次数
      if (flag <= 8) {
        if (flag % 2 == 0) {
          features.forEach(e => {
            e.setStyle(flashStyle1)
          })
        } else {
          features.forEach(e => {
            e.setStyle(flashStyle2)
          })
        }
        flag++;
      } else {
        //停止闪烁,还原样式,删除间隔对象
        features.forEach(e => {
          e.setStyle(flashStyle1)
        })
        window.clearInterval(interval);
      }
      //间隔时间
    }, 500);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

2， 全部代码

mapTool.js

import * as olCoordinate from 'ol/coordinate';
import { MousePosition, ScaleLine } from 'ol/control';
import * as olLayer from 'ol/layer'
import * as olSource from 'ol/source';
import Overlay from 'ol/Overlay.js';
import * as olStyle from 'ol/style';
import olFeature from 'ol/Feature'
import olPoint from 'ol/geom/Point'
import olLineString from 'ol/geom/LineString'
import { getArea, getLength } from 'ol/sphere.js';
import { get } from "ol/proj";
/**
 * 给地图添加样式图层
 * @param {*} map 
 */
export function addLineLayerClickPlas(map) {
  //实例化一个矢量图层Vector作为绘制层
  var source = new olSource.Vector();
  var vectorLayer = new olLayer.Vector({
    // 图层的id
    id: 'ClickNew',
    source: source,
    minZoom: 11,
    style: new olStyle.Style({
      stroke: new olStyle.Stroke({
        color: 'blue',//线条颜色
        width: 8,
      }),
    })
  });
  //将绘制层添加到地图容器中
  map.addLayer(vectorLayer);
}
/**
 * 给地图添加数据并加闪烁
 * @param {*} map 当前地图
 * @param {*} datas 地图的数据
 */
export function addLayerDataClickNew(map, datas) {
  // 根据图层的id获取layer
  var layer = getLayerById(map, 'ClickNew')
  var source = layer.get('source');
  source.clear();
  var features = [];
  if (datas && datas.length > 0) {
    for (var i = 0; i < datas.length; i++) {
      var data = datas[i]
      features.push(
        new olFeature(
          {
            geometry: new olLineString(data)
          }
        ),
      )
    }
    source.addFeatures(features);
  }
  var extent = source.getExtent();
  var view = map.getView();
  view.fit(extent, { duration: 2000 });
  // 闪烁方法
  let interval;
  var flashStyle1 = new olStyle.Style({
    //边框样式
    stroke: new olStyle.Stroke({
      color: 'red',
      width: 4,
    }),
  })
  var flashStyle2 = new olStyle.Style({
    //边框样式
    stroke: new olStyle.Stroke({
      color: 'blue',
      width: 5,
    }),
  })
  //停止闪烁的标志
  let flag = 0;
  interval && clearInterval(interval);
  //闪烁方法对象
  interval = setInterval(
    function () {
      //闪烁次数
      if (flag <= 8) {
        if (flag % 2 == 0) {
          features.forEach(e => {
            e.setStyle(flashStyle1)
          })
        } else {
          features.forEach(e => {
            e.setStyle(flashStyle2)
          })
        }
        flag++;
      } else {
        //停止闪烁,还原样式,删除间隔对象
        features.forEach(e => {
          e.setStyle(flashStyle1)
        })
        window.clearInterval(interval);
      }
      //间隔时间
    }, 500);
    
    // 安装id查询图层
    export function getLayerById(map, layerId) {
	  var layer;
	  var layers = map.getLayers().array_; //图层组
	  for (var i = 0; i < layers.length; i++) {
	    if (layers[i].get('id') === layerId) {
	      layer = layers[i]
	    }
	  }
	  return layer;
	}
/**
 * 添加鼠标位置
 */
export function addPosition(map) {
	  var mousePositionControl = new MousePosition({
	    coordinateFormat: olCoordinate.createStringXY(5),// 将坐标保留5位小数位，并转换为字符串
	    className: 'mouse-position',// 控件的CSS类名
	    target: 'mouse-position',// 将控件渲染在该DOM元素中
	    undefinedHTML: '&nbsp;'// 鼠标离开地图时，显示空格
	  });
	  map.addControl(mousePositionControl);
	}

/**
 * 添加比例尺
 */
export function addScal(map) {
  var scaleLineControl = new ScaleLine({
    //设置度量单位为米
    units: 'metric',
    target: 'scalebar',
    className: 'ol-scale-line'
  });
  map.addControl(scaleLineControl);
}

/**
 * 初始化弹窗
 * @param map
 * @returns {Overlay}
 */
export function addOverlay(map) {
  var overlay = new Overlay({
    element: document.getElementById('popup'), //绑定dom对象，纯js必须使用document绑定，不能像Map的dom对象，只写‘popup’
    stopEvent: false,
    autoPanAnimation: {
      duration: 250
    }
  });
  map.addOverlay(overlay);
  return overlay;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

vue页面代码

<template>
  <!-- 智能GIS提取 -->
  <div class="main">
    <div style="width: 100%; height: 89vh">
      <!-- 拓扑展示模板 -->
      <!-- 地图 -->
      <div id="map" class="map"></div>
      <div id="mouse-position" class="mouse-position"></div>
      <div id="scalebar" class="ol-scale"></div>
      <!-- 卡片信息 -->
        <div id="popup" class="ol-popup" v-show="dialogShow">
          <div id="popup-title" class="popup-title"></div>
          <div id="popup-content" class="popup-content"></div>
        </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { defaults } from 'ol/control'
import XYZ from 'ol/source/XYZ'
import TileLayer from 'ol/layer/Tile'
import { getVectorContext } from 'ol/render'
import Feature from 'ol/Feature'
import {
  addPosition,
  addScal,
  addOverlay,
  addLineLayerClickPlas,
  addLayerDataClickNew,
} from '@/config/mapTool.js'
export default {
  data() {
    return {
     map:null,
     overlay:null,
     dialogShow:false
    }
  },
  created() {
    //调用地图
    this.$nextTick(() => {
      this.initMaps()
    })
  },
  methods: {
    // 初始化地图
    async initMaps() {
      var _self = this
      var backLayer = new TileLayer({
        source: new XYZ({
          crossOrigin: "anonymous",
          url:
            "",// 自行在网上寻找高德底图url加载
        }),
      });
      let view = new View({
        center: [106, 35],
        projection: get("EPSG:4326"),
        zoom: 4.5,
        maxZoom: 17, //放大级别
        minZoom: 4, //缩放级别
        enableRotation: false, //启用旋转
      });
      this.map = new Map({
        layers: [backLayer],
        target: "map",
        view: view,
        controls: defaults({
          zoom: false,
          rotate: false,
        }),
      });
      //加载当前经纬度
      addPosition(this.map)
      //加载比例尺
      addScal(this.map)
      // 添加图层
      addLineLayerClickPlas(this.map)
      let data = [
        [111.56299412, 40.79764337],
        [111.56310268, 40.79751877],
        [111.56405105, 40.79807637],
        [111.56426811, 40.79792264]
      ]
      // 给图层添加数据
      addLayerDataClickNew(this.map, data)
      setTimeout(() => {
        this.overlay = addOverlay(this.map)
      }, 1000)
      this.view = view
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
}

.map /deep/ .ol-attribution.ol-uncollapsible {
  display: none !important;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;

    // gis---->
    .map {
      width: 100%;
      height: 100%;
    }

    .map /deep/ .ol-attribution.ol-uncollapsible {
      display: none !important;
    }

    .mouse-position {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 150px;
      height: 20px;
      background-color: #000;
      text-align: left;
      box-sizing: border-box;
      padding-left: 15px;
      font-size: 12px;
      color: #fff;
      line-height: 20px;
    }

    .ol-scale {
      left: 150px;
      bottom: 0;
      position: absolute;
    }

    .ol-scale /deep/ .ol-scale-line {
      position: relative;
      bottom: 0;
      background: rgba(0, 60, 136, 0.5);
    }

    #menu {
      position: absolute;
      top: 0;
      left: 0;
    }

    .ol-popup {
      display: none;
      position: absolute;
      background-color: white;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      width: 200px;
    }

    .ol-popup:after,
    .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: ' ';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }

    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }

    .popup-title {
      font-weight: bold;
      border-bottom: 1px solid #cccccc;
      padding: 5px 8px;
    }

    .popup-content {
      padding: 5px 8px;
    }

    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 6px;
      right: 6px;
    }

    .ol-popup-closer:after {
      content: '✖';
    }

    .layerlogo {
      position: absolute;
      bottom: 50px;
      right: 30px;
      background-color: #fff;
      border: solid 1px #409eff;
      width: 80px;
    }

    .layerlogo span {
      display: block;
      width: 100%;
      height: 20px;
      color: #fff;
      font-size: 12px;
      background-color: #409eff;
      margin-bottom: 10px;
    }

    .legend {
      position: absolute;
      bottom: 50px;
      background-color: #fff;
      padding-right: 20px;
      border: solid 1px #409eff;
    }
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242