echarts地图上添加canvas动画

最新推荐文章于 2024-04-25 14:40:40 发布

慕靥

最新推荐文章于 2024-04-25 14:40:40 发布

阅读量3.6k

点赞数 2

文章标签： canvas

本文链接：https://blog.csdn.net/qq_43359431/article/details/103633496

版权

最近做的一个项目需要做出地图上有光柱,点击地图选中区域变色若有光柱则切换光柱为坐标并上下浮动,研究了一久最后决定使用echarts来做地图,光柱则使用canvas添加在图层上方div层为echarts地图图层在下面两个canvas图层中添加动效,为使canvas图层不影响地图的是用在上面添加pointer-events: none<body> <div id="char...

摘要由CSDN通过智能技术生成

最近做的一个项目需要做出地图上特定位置有光柱并且闪烁,点击地图选中区域变色若有光柱则切换光柱为坐标,坐标上下浮动,研究了一久最后决定使用echarts来做地图,光柱和坐标动效则使用canvas添加在图层上方

div层为echarts地图图层
在下面两个canvas图层中添加动效,为使canvas图层不影响地图的是用在上面添加pointer-events: none

<body>
		<div id="chart1" style="width: 100%;height: 37.5rem;position: absolute;pointer-events: auto;"></div>
		// 'chart1'此图层为调用echarts绘制地图的图层
		<canvas id="test" ; width="1680" height="1000" style="position: absolute; z-index: 1;pointer-events: none;"></canvas>
		<canvas id="test2" ; width="1680" height="1000" style="position: absolute; z-index: 2;pointer-events: none;"></canvas>
		// 这两个canvas是我项目使用的浮在地图上的光柱和其他内容图层
</body>

echart地图配置:
引入echarts的js和要使用地图的js
(js或json官网就有,在官网下载最新版本文件夹中map下载)

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/map/js/china.js"></script>

地图初始化,详细配置项就不细赘,直接看官网

echart 中国,世界,省份的初始配置
中国地图:

	geo: {
			show: true,
			map: 'china',
			label: {
				normal: {
					show: false
				},
				emphasis: {
					show: false,
				}
			}

省份地图(直接使用名称):

	geo: {
			show: true,
			map: "安徽",
			label: {
				normal: {
					show: false
				},
				emphasis: {
					show: false,
				}
			}

世界地图:

	geo: {
			show: true,
			map: 'world',
			label: {
				normal: {
					show: false
				},
				emphasis: {
					show: false,
				}
			}

地图初始后就来解决需求:地图上特定位置有光柱并且闪烁
光柱闪烁的动效可以使用canvas来制作
(对canvas不熟的小伙伴可以看这个
https://www.runoob.com/html/html5-canvas.html
https://www.runoob.com/w3cnote/html5-canvas-intro.html),
传入经纬度转化为页面上的像素坐标就要使用echarts中的api

// [128.3324, 89.5344] 表示 [经度，纬度]。
// chart为需要操作echart
// geo要进行操作的geo坐标系
// 使用第一个 geo 坐标系进行转换：
chart.convertToPixel('geo', [128.3324, 89.5344]); // 参数 'geo' 等同于 {geoIndex: 0}
// 使用第二个 geo 坐标系进行转换：
chart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);
// 使用 id 为 'bb' 的 geo 坐标系进行转换：
chart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);

转化后就可以在传入位置上进行绘图了
(这里的canvas我绘制的位置是在另一个canvas图层上,分层绘制减少图层间刷新时的干扰)

var coord=chart.convertToPixel('geo', [128.3324, 89.5344]);
ctx.beginPath();
//绘制矩形
ctx.fillRect(coord[0] - 8, coord[1] + 9, 16, -80);
//绘制完矩形后让其闪动则可以在一定时间内增加减少其透明度
ctx.closePath();

最终效果
最终效果,光柱闪烁
绘制完成为矩形添加动态效果,项目需求是闪烁,我这里的思路是使用渐变填充颜色,在改变渐变白色部分的透明度即可.(若有更好做法,望不吝赐教,感激感激)

最后就是阴影部分,这个地方花了我很长时间去做,虽然到达了目的但感觉我使用的方法并不是最优解,特此记录

最近收到私信说看的不是太明白(自以为写得很好…惭愧…这就是所谓的写得差还不自知吧…捂脸),这里重新整理了部分源码发在下面,希望能帮助到你们

<!DOCTYPE html>
<html>
	<head>
		<meta

最低0.47元/天解锁文章

慕靥

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
9
评论
echarts地图上添加canvas动画

最近做的一个项目需要做出地图上有光柱,点击地图选中区域变色若有光柱则切换光柱为坐标并上下浮动,研究了一久最后决定使用echarts来做地图,光柱则使用canvas添加在图层上方div层为echarts地图图层在下面两个canvas图层中添加动效,为使canvas图层不影响地图的是用在上面添加pointer-events: none<body> <div id="char...
复制链接

扫一扫