利用高德api获取行政区边界geoJson，基于echart实现全国各省地磁分布统计图

已于 2023-11-15 18:01:28 修改
阅读量1.9k 收藏 6
点赞数 3
分类专栏： vue 文章标签： vue.js 前端 大数据 echarts
于 2023-11-15 17:47:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangfan_357/article/details/134423687
版权

利用高德api获取行政区边界geoJson，基于echart实现全国各省地磁分布统计图

前提条件：
每次涉及到全国地图的echart统计图表时，都要费时间去找、去下载一份离线的中国地图json数据，有点麻烦呢，此方法可以利用高德地图api，在线获取一份中国地图数据，很方便吖！

效果如图：
在这里插入图片描述
代码如下：
（1）使用npm方式安装Loader
npm i @amap/amap-jsapi-loader --save

（2）新建页面，并在页面中引入amap-jsapi-loader，初始化地图数据，继而进一步进行其他逻辑的处理

<template>
    <div>
        <div id="ZGDT3" class="w-100 h-100"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import displayYNDCService from "@/services/displayYNDC";
export default {
    components: {},
    data() {
        return {
            mapKeyValue:"aa31c5bXXXXXX", //此处为自己申请的高德地图密钥key
            geoJsonZGDT3: {
                features: []
            },
            listZGDT3:[],
        }
    },
    mounted() {
        this.getGeoJson();
    },
    methods: {
        //利用高德api获取行政区边界geoJson,areaCode为区域编码
        getGeoJson() {
            let that = this;
            let areaCode = 100000; //中国

            AMapLoader.reset();
            
            AMapLoader.load({
                    key:that.mapKeyValue,    // 申请好的Web端开发者Key，首次调用 load 时必填
                    version:"2.0",           // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins:[],              // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    AMapUI: {                // 是否加载 AMapUI，缺省不加载
                        version: '1.1',      // AMapUI 版本
                        plugins:['geo/DistrictExplorer'],   // 需要加载的 AMapUI ui插件
                    },
                }).then((AMap)=>{

                    let districtExplorer = new AMapUI.DistrictExplorer();

                    districtExplorer.loadAreaNode(areaCode, function (error, areaNode) {
                        if (error) {
                            console.error(error);
                            return;
                        }
                        
                        //获取当前所选中区域下的所有子级区域
                        let childAreaJson = areaNode.getSubFeatures();

                        that.geoJsonZGDT3.features = childAreaJson;
                    
                        that.getData(areaCode);
                    });

                }).catch(e=>{
                    console.log(e);
                })
        },

        //获取地磁分布统计数据
        async getData() {
            
            this.listZGDT3 = [];

            let dataObj = await displayYNDCService.getData();

            let areaList = this.geoJsonZGDT3.features; //区域列表
            let areaDataList = dataObj.DeviceByAddress; //区域数据列表
            
            let mapDataList = []; //地图数据列表

            //初始化地图数据列表
            areaList.forEach(item => {
                let mapDataObj0 = {
                    name: item.properties.name,
                    value: [item.properties.center[0], item.properties.center[1], -1],
                    areaCode: item.properties.adcode,
                    level:item.properties.level
                }
                mapDataList.push(mapDataObj0);
            });

            //对比区域列表与区域数据列表，找到code相等的数据，将地图数据列表中对应位置上的数据替换掉
            areaList.forEach((item0,index0) => {
                areaDataList.forEach(item1 => {
                    if(item0.properties.adcode == item1.addressCode){
                        let mapDataObj1 = {
                            name: item0.properties.name,
                            value: [item0.properties.center[0], item0.properties.center[1], item1.count],
                            areaCode: item0.properties.adcode,
                            level:item0.properties.level
                        }
                        mapDataList[index0] = mapDataObj1;
                    }
                })
            });

            //将地图数据列表进行排序
            mapDataList = mapDataList.sort(function (a, b) {
                return b.value[2] - a.value[2];
            });
            
            this.listZGDT3 = mapDataList;
        },

        //初始化中国地图
        initChartZGDT3(){
            // 解决echarts多次渲染问题.如果已渲染则销毁
            if (this.chartZGDT3) this.chartZGDT3.dispose();

            // 基于准备好的dom，初始化echarts实例
            let chartZGDT3 = (this.chartZGDT3 = this.$echarts.init(document.getElementById("ZGDT3")));

            //注册地图
            this.$echarts.registerMap('china', this.geoJsonZGDT3);

            let mapDataList = this.listZGDT3;
            
            let max = 0;
            let mapDataList_noZero = [];

            if(mapDataList.length>0){
                //获取地图数据列表中的最大值
                max = mapDataList[0].value[2];
                
                //从地图数据列表中筛选出数量不为0的数据组成新的列表
                mapDataList_noZero = mapDataList.filter(item => item.value[2] !== -1);
            }
            
            let optionZGDT3 = this.optionZGDT3 = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderWidth:1,
                    borderColor: '#46F0ED',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: 'z-index:100',
                    formatter: function(params) {
                        //根据业务自己拓展要显示的内容
                        let res = "";
                        let name = params.name;
                        let value = 0;
                        let type = params.seriesType;
                        if(type=="map"){
                            value = params.data.value[2]==-1?0:params.data.value[2];
                            res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                        }
                        else{
                            value = params.value[2]==-1?0:params.value[2];
                            res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                        }
                        return res;
                    },
                    textStyle: {
                        fontSize: 12
                    }
                },
                visualMap: { //图例值控制
                    left:'4%',
                    min: 0,
                    max: max,
                    itemWidth:12,
                    itemHeight:145,
                    seriesIndex: [1],
                    calculable: true,
                    show: true,
                    color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#36E771'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: { //不可去除，因为他是与带有涟漪特效动画的散点（气泡）图绑定在一起的
                    map: 'china',
                    aspectScale: 0.83,
                    zoom: 1.7,
                    roam: false, //是否允许缩放
                    top:'28%',
                    // left:'30%',
                    label: {
                        normal: {
                            show: false,
                            textStyle:{
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#1AE0FB', //省市边界线
                            borderWidth: 0.8,
                            areaColor: {
                                type: 'linear-gradient',
                                x: 1000,
                                y: 600,
                                x2: 1000,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: '#274d68' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#09132c' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            },
                        }
                    },
                    emphasis:{
                        label:{
                            show:false
                        },
                        itemStyle:{
                            areaColor:'rgba(10, 10, 10, 0.8)'
                        }
                    }
                },
                series:[
                    {
                        type: 'map',
                        mapType: 'china',
                        aspectScale: 0.83,
                        zoom: 1.7, //当前视角的缩放比例
                        roam: false, //是否开启平游或缩放
                        top:'28%',
                        // left:'30%',
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 2
                        },
                        label: {
                            normal: {
                                show: false,
                                textStyle:{
                                    color: '#fff'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#1AE0FB', //省市边界线
                                borderWidth: 0.8,
                                areaColor:"rgba(0,10,56,0.8)"
                            }
                        },
                        emphasis:{
                            label:{
                                show:false
                            },
                            itemStyle:{
                                areaColor:"rgba(10, 10, 10, 0.8)"
                            }
                        },
                        data: mapDataList
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        rippleEffect: { //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 4 //波纹圆环最大限制，值越大波纹越大
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right', //显示位置
                                offset: [8, 0], //偏移设置
                                formatter: function(params){//圆环显示文字
                                    return params.data.name + " - " + params.data.value[2];
                                },
                                fontSize: 13,
                                
                                color:'#ffffff',
                                lineHeight:20,
                                backgroundColor:'rgba(0, 0, 0, 0.8)',
                                borderWidth:1,
                                borderColor: '#1AE0FB',
                                borderRadius:4,
                                padding:[7,18,4,7],
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        symbol: 'circle',
                        symbolSize: function(val) {
                            //return 5+ val[2] * 5; //圆环大小
                            return 7;
                        },
                        itemStyle: {
                            normal: {
                                //show: false,
                                // color: '#f00'
                                show: true,
                                color: '#F39D13',
                                shadowBlur: 10,
                                shadowColor: '#F39D13'
                            },
                            emphasis: {
                                show: false,
                                color: 'rgba(37, 43, 61, .5)' //悬浮背景
                            }
                        },
                        data: mapDataList_noZero
                    },
                    //目标点
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        zlevel: 4,
                        rippleEffect: {
                            period: 4,
                            brushType: 'stroke',
                            scale: 4
                        },
                        itemStyle:{
                            color:"#FA4E4B"
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                //offset:[5, 0],
                                color: '#0f0',
                                formatter: '{b}',
                                textStyle: {
                                    color: "#0f0"
                                }
                            },
                            emphasis: {
                                show: false,
                                color: "#f60"
                            }
                        },
                        symbol: 'pin',
                        symbolSize: 50,
                        data: [mapDataList[0]]
                    }
                ]
            }

            // 绘制图表
            chartZGDT3.setOption(optionZGDT3, true);
            
        }
    }
}
</script>

<style lang='less'>
</style>

如有漏洞，欢迎互动指教！！！！！！！！！！！！！

*杨丫丫*
关注
专栏目录
实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据（可精确到街道级）
HashTang的博客
01-13 1万+
geojson 数据下载地址：https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据（可精确到乡镇/街道级） 该项目 github 地址：https://github.com/TangSY/echarts-map-demo，喜欢的话，可以给个star哦 一、通过API接口，实时获取最新中国省市区县geoJSON格式地图数据，可用于Echart
高德地图中国省级边界线GEOJSON格式
07-13
完整的高德地图中国省级边界线，包含34个省/直辖市/自治区/行政区，坐标格式是WGS84,EPSG4326
【高德地图入门】--- 解析geojson
热门推荐
qq_39078783的博客
12-22 1万+
简介 GeoJSON是一种用于编码各种地理数据结构的数据。GeoJSON对象可以表示几何、特征或特征集合。GeoJSON支持以下几何类型：点（Point）、线（LineString）、面（Polygon）、多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何集合（GeometryCollection）。GeoJSON中的功能包含几何对象和其他属性，特征集合表示一系列特性。 GeoJSON对象 GeoJSON总是由一个单独的对象组成。此对象（指的是下
如何使用 ECharts 将中国地图省份合并为大区保姆级教程,GeoJSON数据合并，真实项目实践
最新发布
前端开发工程师
08-12 2539
公司项目要求在中国地图上显示各大区的设备运行情况及其数据，`echarts`引入地图数据后全是一块一块的省份，但是公司要求将部分省份合并成一个战区，中国地图也就分为了西北战区，北部战区，中部战区，西南战区，东部战区，南部战区六大战区，`echarts`也没有这个功能只能从`echarts`支持的`map`数据入手，如何下载中国地图的`json`数据，进行处理自定义，将各个省份合并为一个`GeoJSON`格式的文件，`echarts`地图可直接引用`GeoJson`文件进行达到地图合并自定义的效果。
百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域
周陆军的博客，分享it技术。
04-11 5186
echart矢量地图或者地图绘制矢量图层，GeoJSON哪里提供呢？dataV提供数据下载，这些数据也是从高德上面来的，翻了下高德地图的api，其实可以直接获取。
导出乡镇、街道的地图geoJson数据
weixin_55556204的博客
11-24 1万+
我们可以通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。 如何拿到街道和乡镇的数据 下载 bigMap ， 安装之后打开，可以在右上角进行区域的选择，它是精确到镇级的，这里不要点击左边的下载按钮，点击图中红框选中的导出按钮，即可保存kml文件 打开 geojson.io （可能有点慢，不要急），上把刚刚导出的kml文件导入进来 左边为范围展示，右边为geoJson数据 重复上述步骤，导出所有数据，
高德api使用本地json数据
dnxyn的博客
10-27 749
引入本地文件(与html同一目录）改为geojson格式。
最新 echarts json地图预览下载（在线获取高德最新行政区划边界坐标）
10-08
此代码里面为完整代码。运行需要在http服务容器，为了方便大家在根目录放了个简易的服务器。双击简易服务器即可打开，注意， 必须用谷歌浏览器访问，其它浏览器未做兼容性 地图数据跟高德地图是同步的。调用的高德的api获取的行政边界坐标。所以都是最新的行政区划边界。 注意：如果程序报错地图出不来，请自行更换config/config.js 里面的mapkey （自行到高德开发平台申请一个web服务的key， 每天免费调用2000次）
全国行政区划边界geojson数据集，可用于gis地图边界绘制，echart地图绘制
06-14
全国行政区划边界的GeoJSON数据集是一种地理信息系统（GIS）中使用的数据格式，它以JSON（JavaScript Object Notation）的形式存储地理数据。GeoJSON数据集通常包含行政区划的边界坐标、属性信息和相关的元数据。 ...
地图geoJson(行政区域边界)下载器，实时下载最新数据(附送实现教程)
05-11
> 所以，只能想想其他办法了，回想起平常使用高德地图搜索某个地名的时候，好像会有个边界区域给我们绘制出来，然后我就觉得它既然能画出来，应该会有办法从某些渠道获取，或者高德地图会提供相应的 API。...
获取你想要的城市边界geojson文件（可执行jar包）
05-05
执行jar包（jdk1.8环境），输入你想要的城市名（输入一个或者多个城市名，多个请用逗号隔开），自动生成城市边界geojson文件（存放在同级目录下）
中国省市县三级行政区geojson地图数据
11-15
中国行政区geojson格式矢量地图数据，根据行政区代码划分文件。
中国行政区划GeoJson数据
01-09
中国行政区划数据用于后期使用资源，自己用的，如果对大家有帮助就很好
按照adcode获取对应geoJSON数据（同步最新）
09-21
下载以后请解压后直接打开index.html 输入你需要的省市adcode 可以获取对应的geoJSON数据，echarts中可直接使用。 github地址：https://github.com/bmsherry/-geoJSON- 欢饮fork star
中国geojson中国省市区县四级联动geojson中国地图中国区县地图中国省市区县行政区划四级联动行政区划行政区划代码行政区划名称echarts地图
06-19
中国geojson 中国省市区县四级联动geojson 中国地图 中国区县地图 中国省市区县行政区划 四级联动行政区划 行政区划代码 行政区划名称 echarts地图
全国省市区json数据（来自高德地图）
10-16
全国省市区json数据（来自高德地图），可用于下拉联动菜单。
基于高德地图逆地理编码 获取乡镇/街道边界+百度地图手工描绘边界
07-12
本话题主要关注如何利用高德地图的逆地理编码服务获取乡镇或街道边界，并在百度地图上进行手工描绘和调整，以适应具体需求。以下是相关知识点的详细介绍： 1. **逆地理编码**： 逆地理编码是一种将经纬度坐标转换...
百度（高德）地图从json文件提取经纬度、地点等信息
风
05-25 3162
进入地图平台，右键“检查”，打开控制台，找到“网络”，选择其中一个json文件下载保存（该文件包含了经纬度、地铁线路、站点等信息）看到如下图所示，Ctrl + A全选，后复制粘贴保存到一个自己命名的 json文件中。
Python通过高德API获取全国省市区行政区边界
DooDoo~的博客
08-24 1233
本文使用Python通过高德API实时获取全国省市区三级行政区的边界，可以保证准确性和时效性的要求。
利用GeoJSON和百度地图实现乡镇边界轮廓展示
总结起来，这篇文档提供了利用百度API在网页上展示乡镇边界轮廓的方法，涉及数据格式转换、服务器配置、地图API的集成以及实际地图绘制的过程。通过这些步骤，用户能够定制地图视图，显示出更精细的行政区域细节。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值