Echart自定义图片绘制热力图实现图片适配

可能你会有这样的需求，在一张场景的图片上，通过热力图的形式直观的展示热点区域，如果你使用的是echart图表，那这个可能会给帮助，如此让我们一起去用echart的地理坐标自定义的实现一个以图片背景，实现一个热力图。

开发准备

技术上因为我项目上使用的是react编程、因此对echart做了简单的封装处理，对于图表渲染这里的实现可能和官方demo略有一点区别。实现自定义图片绘制热力图时参考了ehcart社区demo（2d-自定义地图实现热力图），该demo基本实现想要的样子，但是demo绘制的背景图是反面倒立成像的，并不满足热力图成像的规则。

开发需求及痛点

• 网络获取图片背景素材绘制热力图层
• 图片尺寸大小不固定，容器为定宽

具体实现

认识地理坐标系组件geo。

简单介绍下地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。

开发流程如下

1.图片加载
2.地图注册
3.设置option

1. 图片加载。
   image图片加载，在canvas上的绘制有两个需要注意的地方，图片加载中的跨域问题。

(unknown) Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

首先并不是说 canvas 使用的 image 不能跨域，而是说 canvas 使用了没有权限的跨域图片在使用 canvas.toDataURL()等数据导出函数的时候会报错。修改代码如下

image.setAttribute("crossOrigin",'Anonymous');
image.src = '图片路径'; 

其实就是那个 img.crossOrigin = “Anonymous” 做了巨大的贡献，它开启了本地的跨域允许。当然服务器存储那边也要开放相应的权限才行，