kobef08

Arcgis地图可视化demos

4

## 介绍 整理在`arcgis map`上做过的可视化demo，持续更新中... * [河流运动轨迹动画](https://chengquan223.github.io/map-canvas/examples/arcgis-map-river.html) * [动态风流场](https://chengquan223.github.io/map-canvas/examples/arcgis-map-wind.html) * [Taxi运动轨迹动画](https://chengquan223.github.io/map-canvas/examples/arcgis-map-move.html) * [路线轨迹动画](https://chengquan223.github.io/map-canvas/examples/arcgis-map-road.html) * [圆环光晕效果](https://chengquan223.github.io/map-canvas/examples/arcgis-map-ring.html)

高德地图可视化demos

2

## 介绍 整理在`amap`上做过的可视化demo，持续更新中... * [闪烁点动画](https://chengquan223.github.io/map-canvas/examples/amap-flashmarker.html)

## 介绍 整理在`canvas`上做过的可视化demo，持续更新中... * [canvas-数据眼](https://chengquan223.github.io/map-canvas/examples/canvas-dataEye.html) * [canvas-日历图-年](https://chengquan223.github.io/dazv/examples/canvas-calendar-year.html) * [canvas-日历图-月](https://chengquan223.github.io/dazv/examples/canvas-calendar-month.html) * [canvas-气泡](https://chengquan223.github.io/map-canvas/examples/canvas-buddle.html) * [canvas-点线运动](https://chengquan223.github.io/map-canvas/examples/canvas-line.html) * ~~[canvas-值域](https://chengquan223.github.io/map-canvas/examples/canvas-line.html)~~

## 介绍 整理在`google map`上做过的可视化demo，持续更新中... * ~~[圆形扩散动画](https://chengquan223.github.io/map-canvas/examples/google-map-flashmarker.html)~~

## 介绍 整理在`openlayers`上做过的可视化demo，持续更新中... * [圆形扩散动画](https://chengquan223.github.io/map-canvas/examples/openlayers-flashmarker.html)

## 介绍 整理在`baidu map`上做过的可视化demo，持续更新中... * ~~[线运动动画](https://chengquan223.github.io/map-canvas/examples/baidu-map-pointline.html)~~ * [动态风流场](https://chengquan223.github.io/map-canvas/examples/baidu-map-wind.html) * [运动轨迹动画](https://chengquan223.github.io/map-canvas/examples/baidu-map-move.html) * [圆形扩散动画](https://chengquan223.github.io/map-canvas/examples/baidu-map-flashmarker.html) * [台风运动轨迹](https://chengquan223.github.io/map-canvas/examples/baidu-map-typhoon.html)

canvas动画—圆形扩散、运动轨迹

2

## 介绍 在ECharts中看到过这种圆形扩散效果，类似css3，刚好项目中想把它用上，but我又不想引入整个echart.js文件，更重要的是想弄明白它的原理，所以自己动手。在这篇文章中我们就来分析实现这种效果的两种方法，先上效果图：  ## 实现原理 通过不断的改变圆的半径大小，不断重叠达到运动的效果，在运动的过程中，设置当前canvas的透明度`context.globalAlpha=0.95`，使得canvas上的圆逐渐透明直至为0，从而实现这种扩散、渐变的效果。 ## 实现方法一 *1. 关键技术点* `context.globalAlpha = 0.95`; //设置主canvas的绘制透明度。 创建临时canvas来缓存主canas的历史图像，再叠加到主canvas上。 *2. 绘制过程* 首先，我们先来写一个绘制圆的方法： ```js //画圆 var drawCircle = function() { context.beginPath(); context.arc(150, 100, radius,...