背景
在做相似中国的人口密度“热力”图时，一开始用高德地图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画中国地图及省份切换
发表回复