Echarts+高德地图，获取全国省市区，区域板块地图获取并高亮显示(echarts高德地图自定义区域)

Echarts+高德地图，获取全国省市区，区域板块地图获取并高亮显示

推荐整理分享Echarts+高德地图，获取全国省市区，区域板块地图获取并高亮显示(echarts高德地图自定义区域)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts地图参数设置,echarts+高德地图绘制3维图形,echarts 地图,echarts地图geo,echarts地图geo,echarts高德地图,echarts高德地图自定义区域,echarts高德地图,内容如对您有帮助，希望把文章链接给更多的朋友！

当用户选择省市区之后，可以看到对应区域的高亮显示。

如图:

之前用户选择的是江苏省，因此当前高亮显示的是江苏省地图板块，如果之前用户选择的是成都市，那么地图则会变成四川省的版图，高亮显示成都市，如下图:

可以继续下钻，选择区域高亮显示。

这里分享一个工具: DataV.GeoAtlas地理小工具系列

通过adcode码可以查看全国的地图板块。

注意！注意！具体操作步骤来啦！

1.创建一个存放地图的容器

<div id="charts"></div>

2.获取容器

myChart = echarts.init(document.getElementById("charts"));

3.运用高德地图获取adcode码，此处我用的是axios来进行获取

axios .get( `https://restapi.amap.com/v3/geocode/geo?address=${ district?city:!district && city?province:!district && !city?'中国':'中国' }&output=JSON&key=af092dccf*********cf19ade46` ) .then((res) => { adcode = res.data.geocodes[0].adcode;})

这里需要注意几个地方:

${district?city:!district && city?province:!district && !city?'中国':'中国'}

以上代码意思是:如果我拿到了区名(锦江区),那么这里就应该用市名(成都市)去生成地图，如果拿到了市名(成都市)，那么这里就用省名(四川省)生成地图，以此类推，如果拿到了省名(四川省),那么就用全国(中国)去生成地图。(当然这几个参数是我从后端拿到的数据哈)

key=af092dccf1***********9ade46

这个key就是你在高德地图上申请的key，具体怎么申请可以百度一下。

adcode = res.data.geocodes[0].adcode;

然后就拿到了当前选择区域的adcode

4.通过adcode码，获取到区域地图，这里是通过上面分享的工具DataV.GeoAtlas地理小工具系列

打开之后是这样的:

这里就有请求地址，可以拿到地图，地址里面的 100000也就是中国的adcode。你可以试试输入不同的adcode码左侧会显示不同的区域地图。

具体操作:

myChart.showLoading(); axios .get( `https://geo.datav.aliyun.com/areas_v3/bound/${ adcode == 0 ? 100000 : adcode }_full.json` ) .then((geoJson) => { console.log(geoJson); //获取所有省、市 // console.log(geoJson.data.features); let allData = geoJson.data.features; let seriesData = []; allData.forEach((item) => { // console.log(item.properties.name); // console.log(item); let obj; if (item.properties.name) { if ( item.properties.name == province || item.properties.name == city || item.properties.name == district ) { // console.log(item.properties.center); setLongitudeLatitude(item.properties.center); obj = { name: item.properties.name, value: measure, selected: true, }; } else { obj = { name: item.properties.name, selected: false, }; } seriesData.push(obj); } }); myChart.hideLoading(); echarts.registerMap("ZG", geoJson.data); myChart.setOption( (option = { title: {}, tooltip: { trigger: "item", }, series: [ { type: "map", map: "ZG", silent: true, //禁用地图的hover事件 label: { show: true, }, data: seriesData, zoom: 1, //当前视角的缩放比例 roam: true, //是否开启平游或缩放 scaleLimit: { //滚轮缩放的极限控制 min: 1, max: 3, }, }, ], }) ); });

这里解释一个地方:以下部分代码是找到高亮显示的区域，然后加载series.data里面

接下来看看完整代码吧！

let myChart; let option; const renderChart = (province, city, district, measure) => { myChart = echarts.init(document.getElementById("charts")); let adcode; axios .get( `https://restapi.amap.com/v3/geocode/geo?address=${ district?city:!district && city?province:!district && !city?'中国':'中国' }&output=JSON&key=af092dc********cf19ade46` ) .then((res) => { adcode = res.data.geocodes[0].adcode; myChart.showLoading(); axios .get( `https://geo.datav.aliyun.com/areas_v3/bound/${ adcode == 0 ? 100000 : adcode }_full.json` ) .then((geoJson) => { console.log(geoJson); //获取所有省、市 let allData = geoJson.data.features; let seriesData = []; allData.forEach((item) => { // console.log(item.properties.name); // console.log(item); let obj; if (item.properties.name) { if ( item.properties.name == province || item.properties.name == city || item.properties.name == district ) { // console.log(item.properties.center); setLongitudeLatitude(item.properties.center); obj = { name: item.properties.name, value: measure, selected: true, }; } else { obj = { name: item.properties.name, selected: false, }; } seriesData.push(obj); } }); myChart.hideLoading(); echarts.registerMap("ZG", geoJson.data); myChart.setOption( (option = { title: {}, tooltip: { trigger: "item", }, series: [ { type: "map", map: "ZG", silent: true, //禁用地图的hover事件 label: { show: true, }, data: seriesData, zoom: 1, //当前视角的缩放比例 roam: true, //是否开启平游或缩放 scaleLimit: { //滚轮缩放的极限控制 min: 1, max: 3, }, }, ], }) ); }); }); option && myChart.setOption(option); };

有什么问题一起交流哦，不过回复有点不及时。哈哈哈哈