本文使用闪烁图形作为实例，线段和点都是类似的原理
基础方法
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: ' '// 鼠标离开地图时，显示空格
});
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 = 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>