echarts地图--热力图

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

热力地图实现思路分类

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

见下图：

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

做热力地图碰到的问题

1. 地图geo数据问题

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

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

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

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

直接看图：

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

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

下面上代码图：
添加前：

添加后:

修改后的页面效果图：

3. 地图下钻事件

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'
                                    }
                                }
                            }
                        },

代码添加位置如下图：

参考