概述

本文講述如何在ol中實現閃爍點動畫。

實現效果

實現思路

實現如圖的動畫，可以用兩種思路：
1.overlay+css3動畫實現；
2.canvas動畫實現。

實現

1、overlay+css3實現

css的實現如下：

@keyframes animate {0% { transform: scale(0.3); }100% { transform: scale(1); } }.animate-overlay {width: 30px; height: 30px;background: radial-gradient(circle, red, rgba(255, 0, 0, 0));border: 1px solid red;border-radius: 50%;animation: 1s animate infinite; } for(var i = 0;i<data.length;i++) {var d = data[i];var coord = ol.proj.fromLonLat([d.lon, d.lat]);var element = document.createElement('div');element.classList.add('animate-overlay');var overlay = new ol.Overlay({element: element,})map.addOverlay(overlay);overlay.setPosition(coord); }

2、canvas動畫實現

var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var gradCircle = new GradCircle(ctx); var radius = 15,changeRadius = 0.5;var imageLayer = new ol.layer.Image({source: null,zIndex: 2 }); map.addLayer(imageLayer); var source = new ol.source.ImageCanvas({canvasFunction: canvasFunction }); imageLayer.setSource(source); var playFlag = null;window.requestAnimationFrame =(window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){return window.setTimeout(callback,1000/60);} );function refresh() {playFlag = window.requestAnimationFrame(refresh);source.refresh(); }map.on('movestart', function () {window.cancelAnimationFrame(playFlag); }); map.on('moveend', function () {resetState(); });function canvasFunction(extent, res, pixelRatio, size) {canvas.setAttribute('width', size[0]);canvas.setAttribute('height', size[1]);ctx.clearRect(0, 0 , size[0], size[1]);var mapExtent = map.getView().calculateExtent();var mapTopLeft = [mapExtent[0], mapExtent[3]];var topLeft = [extent[0], extent[3]];var tlSrc = map.getPixelFromCoordinate(topLeft);var tlMapSrc = map.getPixelFromCoordinate(mapTopLeft);var xOff = tlMapSrc[0] - tlSrc[0],yOff = tlMapSrc[1] - tlSrc[1];//瀏覽器存在多方的狀態下ctx.scale(pixelRatio, pixelRatio);for(var i = 0;i<data.length;i++) {var d = data[i];var lonlat = [d.lon, d.lat];var coord = ol.proj.fromLonLat(lonlat);if(ol.extent.containsCoordinate(mapExtent, coord)) {var pixel = map.getPixelFromCoordinate(coord);var x = pixel[0] + xOff,y = pixel[1] + yOff;d.radius = d.radius + changeRadius;if(d.radius > radius * 2) d.radius = radius;gradCircle.drawGradCircle(x, y, d.radius);}}return canvas; } resetState(); function resetState(){for(var i = 0;i<data.length;i++) {var d = data[i];d.radius = radius;}refresh(); }

---

技術博客
CSDN：http://blog.csdn.NET/gisshixisheng
在線教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
聯系方式

類型內容

qq	1004740957
公眾號	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS數據可視化群	458292378

總結

以上是生活随笔為你收集整理的ol中闪烁点动画的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。