需求：画中国地图，展示走过的路，并将其点亮

微信图片_20200107171416.jpg

第一步就是echarts画地图，宽给到手机宽的两倍，高度按照手机宽高的比例给个值（也可以大致估个值，不比那么较真）

image.png

生成地图代码如下：

myMap.setOption({
          visualMap: {
            show: false,
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            inRange: {
              color: ['#f08a95', '#fbe6ef', '#f6f67a', '#d4ecb2']
            }

          },
          grid:{
              left:0,
              top:0,
              right:0,
              bottom:0
          },
          series: [
            {
            type: 'map',
            // layoutSize: 100,
            mapType: 'china',
            silent:true,
            itemStyle:{
                normal:{
                  // color: 'yellow',
                  // areaStyle:{color:'#f00'},
                  areaColor: "#e9e9e9" //区域颜色
                }
            },
            roam: false,
            // zoom: 2,
            label: {
              normal: {
                show: true,
                fontSize: '10px'
              }
            },
            data: data
          }]
        });

接着用toDataURL方法将canvas地图生成图片，代码如下

 sctp() {
          let dataURL = document.getElementById('ditu').children[0].children[0].children[0].toDataURL();
          this.saveImgUrl = dataURL;
      }

给图片设置宽高（这就是要按照页面所需要的样式设置了），将图片摆放在页面中，将原来的echarts地图盒子隐藏，这里用绝对定位，z-index设为-1；
就可以实现啦。
就是将原来不可能展现的地图变为图片，前提是先根据数据展示画地图，再转为图片

哦啦 踩坑之旅 一步步的写下来