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

开发准备

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

开发需求及痛点

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

具体实现

认识地理坐标系组件geo。

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

开发流程如下

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

图片加载。
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” 做了巨大的贡献，它开启了本地的跨域允许。当然服务器存储那边也要开放相应的权限才行，如果是设置了防盗链的图片在服务端就没有相应的权限的话本地端设置了这个属性开启权限也是没有用的，需要服务端开启跨域支持。

图片绘制的缩放,根据缩放比剪切图像，并在画布上定位被剪切的部分，相关api:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
参数描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

代码实现相关片段

   const that= this;var image = new Image(); var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var fullImage = new Image();var zoom =1;//缩放比例const containerWidth = this.chartnode.offsetWidth;image.onload = function() {zoom = (image.width > containerWidth) ? image.width/containerWidth:1;canvas.width=image.width/zoom;canvas.height=image.height/zoom;ctx.drawImage(image, 0, 0, image.width,image.height,0,0,canvas.width, canvas.height);fullImage.src = canvas.toDataURL();} image.setAttribute("crossOrigin",'Anonymous');image.src = imgSrc;

缩放比例：根据容器的大小，来缩放图片，最初我的想法是根据计算出的缩放比，通过处理数据源，来实现canvas的绘制，然后发现对与热力图数据，数据量比较庞大的基础上，处理数据带来客户端性能上非常差的体验，然后使用了css3的新特性，根据容器比例缩放。

if (that.chartnode) {that.chartnode.setAttribute("style","-webkit-transform: scale(" + zoom + ");-webkit-transform-origin:0 0;");}

地图注册

var geoMapName = 'geoMap' + Math.round(Math.random() * 1E10);
var features = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": geoMapName},"geometry": {"type": "MultiPolygon","coordinates": [[[[0, 0],[fullImage.width, 0],[fullImage.width, fullImage.height],[0, fullImage.height],  ]]]}}]
};
echarts.registerMap(geoMapName, features);

option设置

option = {backgroundColor: {type: "pattern",repeat: "no-repeat",image: fullImage,},geo: {map: geoMapName,show:false,aspectScale: 1, // 宽高比silent: true,roam: false,left:0,top:0,width:fullImage.width,height:fullImage.height,//   itemStyle: {     //       borderWidth: 0,//       areaColor: {//           type: 'pattern',//           image: fullImage, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串//           repeat: 'no-repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'//       }//   },},visualMap: {show: false,right: 35,bottom: 0,itemWidth: 10,itemHeight: 100,hoverLink: false,inRange: {color: ['blue', 'blue', 'green', 'yellow', 'red']}},series: [{type: 'heatmap',coordinateSystem: 'geo',pointSize: 15,blurSize: 15,data: [[121.15, 31.89, 9],[109.781327, 39.608266, 12],[120.38, 37.35, 12],[122.207216, 29.985295, 12],[123.97, 47.33, 14],[120.13, 33.38, 15],[118.87, 42.28, 16],[120.33, 36.07, 18],[121.52, 36.89, 18],[102.188043, 38.520089, 19],[118.58, 24.93, 21],[120.53, 36.86, 21],[119.46, 35.42, 21],[119.97, 35.88, 22],[121.05, 32.08, 23],[91.11, 29.97, 24]],}]
}

最后得絮叨絮叨社区demo坑了，还是从geo组件开始，代码片段：

            //   itemStyle: {     //       borderWidth: 0,//       areaColor: {//           type: 'pattern',//           image: fullImage, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串//           repeat: 'no-repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'//       }//   },

itemStyle：官方解释为地图区域的多边形图形样式，areaColor为设置地图区域的颜色。

项目优化体验

不得不说的是纹理填充，填充后的图片为反面倒立。这真是难受了一笔。。如果这个功能能正常显示的话，体验效果上会背景的图实现的方式好上不少，但是无奈，花费了好长时间，琢磨了一下午的配置手册文档，也没有找到这个奇怪的问题产生的原因，如果你有问题这个的解决方案，请不吝指教。
既然最后没有实现使用地理坐标系，填充文理的效果，那么背景图的方式可能更加适合，减少了图片转换及canvas绘制的成本。

Echart自定义图片绘制热力图实现图片适配相关推荐

将矩形图片绘制成圆形图片
这周的安卓作业要做一个音乐播放器, 而图片那块需要添加音乐的封面, 获取到的封面为矩形图片, 如果要像网易云一样做一个唱片风格的封面需要将矩形图片绘制成圆形图片, 在StackOverflow上查找得 ...
uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机
废话不多说直接上代码本次是在uniapp中操作的但是canvas都一样前提是你已经赋予了canvas宽高了 //先获取你的canvas let ctx = uni.createCanvasCon ...
android绘制圆形图片、圆圈以及图片缩放
这两天做开发,需要将图片资源做成圆形,并且要对图片进行缩放,研究了半天,终于整出来了,效果如下: 代码如下: package com.android.mywidget; import android. ...
java 图片水印_JAVA实现图片水印
一.JAVA图片水印实现原理 1.1.JAVA图片水印实现思路 1.创建缓存图片对象. 2.创建Java绘图工具对象. 3.使用绘图工具对象将原图绘制到缓存图片对象. 4.使用绘图工具将水印(文字/图 ...
Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解
Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...
小程序mpvue图片绘制水印_开发笔记：使用 mpvue 开发斗图小程序
之前用过 wepy 框架写了个小程序 GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 "扇贝阅读" 微信小程序 ,感觉写法上类似 vue,但不那么 ...
聊天气泡图片的动态拉伸、适配与镜像
聊天气泡图片的动态拉伸.适配与镜像前情提要创建.9.png格式的图片从资源文件夹加载.9.png图片从本地文件加载".9.png"图片项目痛点进阶探索 iOS中的方式 ...
iOS直角矩形图片绘制
1.效果如下.本文仅展示黑色直角矩形背景图片绘制方式.文字为Label后来附加 2.使用自定义的UIImageView.绘制 image.通过贝塞尔曲线.四点连线填充颜色完成. 从(0,0) ---& ...
安卓自定义View进阶-Canvas之图片文字
在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法,本次了解一些绘制图片文字相关的内容.如果你对前几篇文章讲述的内容熟练掌握的话,那么恭喜你,本篇结束之后,大部分的自定义View已经 ...
python中图片绘制和输出相关库的原理详解
Python在图片绘制和输出方面的发展历史可以追溯到20世纪90年代,当时的主要库是Python Imaging Library (PIL),用于处理图像文件和生成图像.PIL是Python中最早的图 ...

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