关于echarts:两种方案AMapEcharts绘制中国人口密度热力图地图

背景

在做相似中国的人口密度“热力”图时，一开始用高德地图AMap，实现了省份区域按密度值展现色彩，解决了悬浮、点击的交互，如区域色彩批改、显示弹窗（InfoWindow）等，因为不心愿地图挪动，地图设置了dragEnable为false。
发现2个问题：

因为不心愿地图挪动，InfoWinodw的autoMove设置了false（即不会主动挪动地图，调整窗体到视线内），那么弹窗的地位得本人计算防止越出边界（通过判断边界设置anchor）；
挪动端页面在地图区域无奈滚动（目前没找到什么办法解决的）。
上述问题如果亲们有解决方案，能够戳戳留言哦，谢谢～

基于上述2个较“麻烦”的问题，我转向看了一下echarts的地图。
本文简略记录了一下2种计划的大抵思路。

`AMap`高德地图

参考官网例子：繁难行政区图+标注，实现大抵思路：

1、通过AMap.DistrictLayer.Country绘制中国省份区域

const disCountry = new AMap.DistrictLayer.Country({  zIndex: 10,  SOC: 'CHN',  depth: 1,  styles: {      'nation-stroke': '#ff0000',      'coastline-stroke': '#0088ff',      'province-stroke': 'grey',      'fill': function (props) {          return getColorByDGP(props.adcode_pro, GDPSpeed)      }  }})var map = new AMap.Map("amap-container", {  zooms: [2, 10],  center: [106.122082, 33.719192],  zoom: 3.5,  isHotspot: false,  defaultCursor: 'pointer',  resizeEnable: false,  dragEnable: false,  zoomEnable: false,  scrollWheel: false,  touchZoom: false,  layers: [      disCountry  ]})

2、通过 AMap.LabelMarker（AMap.LabelsLayer）增加省份文字；

3、别离给地图map、省份文字labelMarker增加mousemove、click事件；

map的悬浮事件处理样例

  map.on('mousemove', function (ev) {      var px = ev.pixel;      // 拾取所在位置的行政区      var props = disCountry.getDistrictByContainerPos(px);      if (props) {          var adcode = props.adcode;          if (adcode) {              highlightDistrict(adcode);          }      } else {          //悬浮在地图外空白处          updateDisCountryStyle();      }  });

省份文字的点击事件样例

 labelsMarker.on('mousemove', function (e) {      highlightDistrict(e.target._opts.extData.adcode); })

高亮时省份区域色彩更新

function highlightDistrict(adcode, color = 'rgb(253,244,155)') {  // 重置行政区款式  disCountry.setStyles({      'fill': function (props) {          return props.adcode == adcode ? color : getColorByDGP(props.adcode_pro, GDPSpeed);      }  });}

4、点击关上AMap.InfoWindow弹窗，设置autoMove为false，不然地图会挪动，只能通过anchor去管制弹窗的方向，再通过窗口大小和地位与容器边界去判断，调整理论显示的地位和anchor方向。

`Echarts`地图

先珍藏起这2个宝藏！

1、阿里的数据可视化核心

这里能够获取到国内省市区的GeoJson数据

2、echarts社区

echarts官网针对国内地图的例子很少，在这里能够看到比拟丰盛的样例和配置源码

地图配置

获取到中国省份geoJson数据后，先注册：

echarts.registerMap('china', china_geojson);

地图相干配置：

option = {    tooltip: {        trigger: 'item',        triggerOn: "click",        backgroundColor: 'rgba(50,50,50,0.9)',        borderWidth: 0,        extraCssText: 'white-space: initial;max-height: 200px;overflow: auto;pointer-events: initial;',        textStyle: {            color: '#fff'        }    },    series: [{        name: '中国地图',        type: 'map',        mapType: 'china',         selectedMode: false,        label: {            show: true,            fontSize:  "10",            color: '#333'        },        itemStyle: {            areaColor: '#eaf0f8',            borderColor: '#cccccc'        },        data: [                {                value: 10,                name: '贵州',                adcode:'520000'            },{                value: 7.0,                name: '广东',                adcode:'440000'            },{                value: 6.5,                name: '北京',                adcode:'110000'            },{                value: 8.5,                name: '重庆',                adcode:'500000'            },{                value: 5,                name: '天津',                adcode:'120000'            },{                value: 2.64,                name: '台湾',                adcode:'710000'            }        ]    }],    visualMap: {        left:20,        bottom:20,        pieces: [{            gte: 0,            lte: 3,            label: "0-3"        }, {            gt: 3,            lte: 5,            label: "3-5"        }, {            gt: 5,            lte: 7,            label: "5-7"        }, {            gt: 7,            lte: 9,            label: "7-9"        },{            gt: 9,            label: ">9"        }]    }}

上述配置间接在社区可运行，成果如下：

echarts间接配置就可实现地图的悬浮、点击事件的交互、弹窗tooltip主动调整地位显示，还能依据映射分组规定去渲染区域色彩，且带分组图例和分组筛选交互。

如果只是做地图数据的展现和简略的交互，用echarts会不便很多。

参考文献

1、ECharts+高德地图，实现省份下的城市或者城市上面区县的地图
2、echarts画中国地图及省份切换

背景

AMap高德地图

Echarts地图