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

68次阅读

共计 2750 个字符,预计需要花费 7 分钟才能阅读完成。

背景

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

  • 因为不心愿地图挪动,InfoWinodwautoMove 设置了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.LabelMarkerAMap.LabelsLayer)增加省份文字;
  • 3、别离给地图 map、省份文字labelMarker 增加 mousemoveclick 事件;

    • 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 弹窗,设置 autoMovefalse,不然地图会挪动,只能通过 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 画中国地图及省份切换

正文完
 0