Echarts +Amap 实现点击地图下钻功能
1、最近的项目需求中，需要实现地图下钻到区的功能，所以在查阅一些资料后，决定使用Amap。
下钻效果：
2、前期工作：
①、首先要去高德api上申请密钥，免费的一天可以发出5000次：developer.amap.com/
②、控制台 新建应用，就会生成一个key
3、在vue中引入
// 打开 index.html
* xxxx 是你的key值 比如：'4565465413213465asdaaffafaa'
//这里我们是用cdn引入的,所以要在build/webpack.base.conf.js里面让webpack不处理aMap的依赖库
externals: {
'AMap':'AMap',
'AMapUI': 'AMapUI'
}4、高德api：用获取行政区的api方法也就是 AMapUI 组件库（https://lbs.amap.com/api/amap-ui/intro）的 DistrictExplorer 进行行政区geoJson的获取。 （详细使用请仔细阅读）
//获取geoJson数据
mounted(){
this.getGeoJson(100000);
}
methods:{
getGeoJson(adcode) {
this.map = new AMap.Map("map", {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
});
let that = this;
AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: this.map
}));
districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
if (error) {
// console.error(error);
return;
}
let Json = areaNode.getSubFeatures();
if (Json.length > 0 && Json[0].properties.level == "district") {
that.parentJson = Json;
} else if (Json.length == 0) {
Json = that.parentJson.filter(item => {
if (item.properties.adcode == adcode) {
return item;
}
});
}
that.geoJsonData = {
features: Json
};
//console.log(that.geoJsonData);
// 此处可执行 获取 地图数据的方法
//获取地图数据 例如：
this.getMapData()
});
});
},
}
5、使用Echarts加载地图 （热力图）
①、地图数据 格式：
// 数据格式
// name,value是必须参数，后面的根据自己实际情况自定义添加
[
{
name：'山东',
value: 1,
leave:''
}
]②、渲染
drawLineEchertsChange(sjcnsjArr) {
console.log(sjcnsjArr);
var e = document.body.clientWidth;
// 基于准备好的dom，初始化echarts实例
this.myEchertsSix= echarts.init(this.$refs.cndb_echartsData)
//注册地图,前面名字自定义,后面是高德获取的geoJson
this.$echarts.registerMap("Map", this.geoJsonData);
myEchertsSix.setOption({
tooltip: {
// 鼠标移到图里面的浮动提示框
// formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
formatter(params, ticket, callback) {
// params.data 就是series配置项中的data数据遍历
let localValue, perf, downloadSpeep, usability, point;
if (params.data) {
// console.log(params.data)
localValue = params.data.value;
perf = params.data.perf;
downloadSpeep = params.data.downloadSpeep;
usability = params.data.usability;
point = params.data.point;
} else {
// 为了防止没有定义数据的时候报错写的
localValue = 0;
perf = 0;
downloadSpeep = 0;
usability = 0;
point = 0;
}
// let htmlStr = `
// ${params.name}
//
// 测试1：${localValue}
//
// `;
// return htmlStr;
}
// backgroundColor:"#ff7f50",//提示标签背景颜色
// textStyle:{color:"#fff"} //提示标签字体颜色
},
visualMap: {
// 左下角的颜色区域
type: "piecewise", // 定义为分段型 visualMap
min: -2,
max: 1,
itemWidth: 8,
itemHeight: 8,
left: "-1%", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "70%", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right: "auto", //组件离容器右侧的距离,'20%'
bottom: "auto", //组件离容器下侧的距离,'20%'w
padding: 0.5,
textGap: 5,
pieces: [
{ value: -1, label: "实际<设计", color: "#4E79E0" },
{ value: 0, label: "实际=设计", color: "#564EBC" },
{ value: 1, label: "实际>设计", color: "#3C9CFF" }
],
textStyle: {
color: "#C0A4C3",
fontSize: 9
}
},
geo: {
map: "Map",
show: true,
zoom: 1.25,
geoIndex: 1,
aspectScale: 0.75, //长宽比
showLegendSymbol: true, // 存在legend时显示
roam: false,
label: {
normal: {
//静态的时候展示样式
show: false, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 9
// fontFamily: "Arial"
}
},
emphasis: {
//动态展示的样式
color: "#43d0d6"
}
},
itemStyle: {
// 地图区域的多边形 图形样式。
borderColor: "rgba(0, 0, 0, 0.2)",
emphasis: {
// 高亮状态下的多边形和标签样式
shadowBlur: 20,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
},
series: [
{
name: "地图",
type: "map",
data: sjcnsjArr,
geoIndex: 0,
// coordinateSystem: "geo",
label: {
show: true
},
roam: false,
layoutCenter: ["60%", "60%"], //属性定义地图中心在屏幕中的位置，一般结合layoutSize 定义地图的大小
layoutSize: "100%"
}
]
});
window.addEventListener("resize", function() {
// console.log("222222222")
myEchertsSix.resize(); //myChart指自己定义的echartsDom对象
});
},
6、效果如下：
7、参考资源：
Echarts社区：https://gallery.echartsjs.com/editor.html?c=xz3jGj90ns