可能你会有这样的需求，在一张场景的图片上，通过热力图的形式直观的展示热点区域，如果你使用的是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” 做了巨大的贡献，它开启了本地的跨域允许。当然服务器存储那边也要开放相应的权限才行，如果是设置了防盗链的图片在服务端就没有相应的权限的话本地端设置了这