需求描述

在Openlayers地图的中，绘制一个点位闪烁动画的效果，说是闪烁，其实就是一个由内而外扩散的圆，如下：

点位闪烁

解决思路

实现这个需求的时候，我们可以利用Openlayers自带的postcompose事件，只要地图进行渲染就会触发这个事件，也就是说，只要我们改变图层的feature或其他东西，就会让地图重新渲染。所以利用这一点，如果我们在postcompose里面一直改变圆的半径，就会循环成动画的效果。
我在加这个图层时，封装了一个函数，传入map（地图）、layer（图层）、record（点位）。

import { Feature } from 'ol';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector';
import { Stroke,  Circle, Style } from 'ol/style.js';
import { Point } from 'ol/geom';
import { transform } from 'ol/proj';
import { wgs84togcj02 } from '&/commonjs/coordinateUtils';// 闪烁点图层函数
const flashPoints = (map, layer, record) => {if (JSON.stringify(record) === '{}') return;//清除上一次的闪烁图层if (layer.current) {map.removeLayer(layer.current);}//wgs84togcj02是自己封装的转换经纬度的函数，不需要的话可忽略const lnglat = wgs84togcj02(record?.longitude, record?.latitude);//下面这段代码是先画一个普通的点位图层const features = [new Feature({geometry: new Point(transform(lnglat, 'EPSG:4326', 'EPSG:3857')),}),];layer.current = new VectorLayer({source: new VectorSource({ features }),});layer.current.setStyle(new Style({image: new Circle({radius: 5,snapToPixel: false,stroke: new Stroke({color: 'red',size: 10,}),}),}));//这里是闪烁动画实现的关键var radius = 0;map.on('postcompose', function () {//0.6是每次扩大的幅度radius = radius + 0.6;//30是最大半径radius = radius % 30;layer.current.setStyle(new Style({image: new Circle({radius,snapToPixel: false,stroke: new Stroke({color: 'red',width: 3,size: 10,}),}),}));});map.addLayer(layer.current);
};

【前端小记】--OpenLayers--3.地图实现点位闪烁（由内而外扩散圆）相关推荐

vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
使用高德地图展示点位和信息窗体展示数据及播放视频
使用高德地图做了一个在地图展示点位,并通过点击,显示直播的功能,这个任务是为了之后大屏做准备. 这是一个能展示多个点标记,并在点击的时候弹出信息窗体,并在信息窗体中播放视频,且展示相关信息以及操作事件 ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
【WebGIS】二、基于Openlayers实现地图的加载与显示
二.基于Openlayers实现地图的加载与显示基于上文中配置好的环境,先通过Element Plus实现一个页面的布局,然后基于openlayers加载显示全球瓦片地图. 1. 引入element ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
html把地图显示全屏显示,Openlayers实现地图全屏显示
本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地 ...
OpenLayers 3地图添加图标
OpenLayers 3地图添加图标一.overlay方式在地图添加图标 1.项目结构 2.map.html <!Doctype html> <html xmlns='http:/ ...
使用OpenLayers 勾画地图
使用OpenLayers 勾画地图 <!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml><head>& ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...

【前端小记】--OpenLayers--3.地图实现点位闪烁（由内而外扩散圆）

需求描述

解决思路

【前端小记】--OpenLayers--3.地图实现点位闪烁（由内而外扩散圆）相关推荐

最新文章

热门文章