vue+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);

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({// 图层的idid: '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获取layervar 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;
}

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 = thisvar 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>