echarts地图--热力图

这里大致总结一下，使用echarts热力地图中碰到的一些问题。仅供参考，如有错误之处，烦请指正。

热力地图实现思路分类

根据个人理解，实现热力地图统计分两类：带百度地图底图（也可以是高德地图、腾讯地图、天地图等等）、不带百度地图底图。

• 带百度地图底图的：即用百度地图做底板，在其上加覆盖层的方式。
  比如：http://lbsyun.baidu.com/jsdemo.htm#mapstylev2
  见下图：
  

  

• 不带百度地图底图：只是用百度地图的相关坐标点按照echarts的规则，用画布canvas画出来的效果。
  比如：https://gallery.echartsjs.com/editor.html?c=xa5_zRRpes

见下图：

不带百度地图底图.jpg

个人倾向第二种，这样加载的东西少些。当第二种不能满足时，才会考虑第一种方式。

做热力地图碰到的问题

1. 地图geo数据问题

当我用echarts的地图做热力地图效果时，发现，以前官方提供地图geoJson数据下载的，因为一些原因，现在不提供了。那么地图的geoJson数据就得自己下载保存在项目里了。当然，官方还是提供了一些，比如世界地图和中国地图。当然你想做到区县级别就得自己去下载了。
既然要自己下载，那么首先，你得了解geoJson地图数据的格式吧，echarts的文档API里有提到：https://geojson.org/，具体代码格式如下：

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

当然，你不要以为这就是全部的了。后面讲到城市名字重叠问题会介绍。
下面提供一下我用的geoJson数据下载地址（都用过，基本数据没问题，有小瑕疵的自己改一下也搞定了）：

• echarts的社区某个热心人士贡献的：https://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q

• 挂载在阿里云的平台的，不确定是否阿里官方出的：
  http://datav.aliyun.com/tools/atlas

ps：使用过程中，如果你发现下载的geoJson数据有误或需要调整的，你得自己去核实修改。

2. 地名（城市名）重叠覆盖问题

直接看图：

重叠1.png

从图中看到了，河南省的【安阳市】和鹤【鹤壁市】重叠在一起了。我的地图geoJson数据是从第一步骤的第二个地址下载下来的数据，别慌，这个可以改的。你去百度地图（或高德地图、腾讯地图、天地图）找到这两个市的不重叠的中心坐标，然后修改一下就行。找坐标这里就不详细讲解了，告诉你怎么替换。
echarts的官方文档里，我没找到，当然，可能是我找到不够仔细。不过通过网上搜索找到了，需要修改properties属性中的："cp":[114.303594,35.752357。如果你的geoJson数据有这个属性直接修改坐标就行，如果没有，添加上就像。

ps：官方文档给的格式里，没有这个属性，你查看看你下载的geoJson数据里有没有，有则修改坐标，无则添加即可。

下面上代码图：
添加前：

重叠代码1.png

添加后:

重叠代码2.png

修改后的页面效果图：

重叠2.png

3. 地图下钻事件

直接看echarts的gallery的demo：https://gallery.echartsjs.com/editor.html?c=xTXhjudr6B
关键代码：

myChart.on("click", function(param) {
  //todo 设置新的的地图geoJson数据url，以及一些业务逻辑
});

4.添加边界轮廓的阴影效果

直接上代码：

 itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                },
                                areaColor: '#767fa6',
                                borderType: 'solid',
                                borderColor: '#616e7e',
                                shadowColor: 'rgba(0,0,0,0.5)',
                                shadowOffsetX: 0,
                                shadowOffsetY: 3,
                                shadowBlur: 16,//16
                            },
                            emphasis: {
                                borderWidth: 1,
                                borderColor: '#616e7e',
                                areaColor: '#0084ff',
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#41576c'
                                    }
                                }
                            }
                        },

代码添加位置如下图：

边界阴影.png

参考

• echarts地图省份文字重叠解决
• 地图geoJson下载
• 地图选择器