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({
    // 图层的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;
}

vue页面代码文章来源地址https://www.toymoban.com/news/detail-820358.html

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

到了这里，关于vue+openLayers闪烁图形/线段/点 都可以使用类似的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！