2023年4月实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

这篇具有很好参考价值的文章主要介绍了2023年4月实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先,来看下效果图

2023年4月实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

在线体验地址:https://geojson.hxkj.vip,并提供实时geoJson数据文件下载

可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据(可精确到乡镇/街道级)、省市区县街道乡村五级行政编码。

前段时间给公司弄了一套基于echarts map的地图数据展示的平台,开发过程中发现百度官方已经不提供地图下载了,于是只能期望能在网上搜到哪位大佬帮忙收集的json文件。找是找到了,然鹅发现大部分都年代久远了,很多地区其实已经重新划分行政区划了。
所以,只能想想其他办法了,回想起平常使用高德地图搜索某个地名的时候,好像会有个边界区域给我们绘制出来,然后我就觉得它既然能画出来,应该会有办法从某些渠道获取,或者高德地图会提供相应的API。于是乎,去到了高德开放平台仔细的查看了一下他提供的api,哈哈,果然有!有了接口,接下来就是撸码了。

第一步,通过高德api获取边界数据

通过查阅API文档可以知道,获取边界数据的接口为行政区查询服务(AMap.DistrictSearch)。使用该服务之前记得去申请一个key,用于调用高德接口,申请地址直通车:https://lbs.amap.com/dev/key/app。

1、在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申请的key值」&plugin=AMap.DistrictSearch"></script>
2、通过以下方式获取数据,以获取中国地图为例;
this.opts = {
    subdistrict: 1,   //返回下一级行政区
    showbiz: false  //最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(this.opts);//注意:需要使用插件同步下发功能才能这样直接使用
this.district.search('中国', (status, result) => {
    if (status == 'complete') {
        this.getData(result.districtList[0], '', 100000);
    }
});
getData(data, level, adcode) {//处理获取出来的边界数据
    var subList = data.districtList;
    if (subList) {
        var curlevel = subList[0].level;
        if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常,这边街道级别数据需要特殊处理
            let mapJsonList = this.geoJsonData.features;
            let mapJson = {};
            for (let i in mapJsonList) {
                if (mapJsonList[i].properties.name == this.cityName) {
                    mapJson.features = [].concat(mapJsonList[i]);
                }
            }
            this.mapData = [];
            //这个mapData里包含每个区域的code、名称、对应的等级,实现第三步功能时能用上
            this.mapData.push({name: this.cityName, value: Math.random() * 100, level: curlevel});
            this.loadMap(this.cityName, mapJson);
            this.geoJsonData = mapJson;
            return;
        }
       
        //街道级以上的数据处理方式
        this.mapData = [];
        for (var i = 0, l = subList.length; i < l; i++) {
            var name = subList[i].name;
            var cityCode = subList[i].adcode;
            //这个mapData里包含每个区域的code、名称、对应的等级,实现第三步功能时能用上
            this.mapData.push({
                name: name,
                value: Math.random() * 100,
                cityCode: cityCode,
                level: curlevel
            });
        }
        this.loadMapData(adcode);
    }
},
3、接下来,利用 AMapUI.loadUI 可以构造一个创建一个 DistrictExplorer 实例,然后利用 DistrictExplorer 的实例,可以根据当前需要加载城市的 areaCode获取到该城市的 geo 数据
loadMapData(areaCode) {
    AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {

        //创建一个实例
        var districtExplorer = window.districtExplorer = new DistrictExplorer({
            eventSupport: true, //打开事件支持
            map: this.map
        });

        districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {

            if (error) {
                console.error(error);
                return;
            }
            let mapJson = {};
            //特别注意这里哦,如果查看过正常的geojson文件,都会发现,文件都是以features 字段开头的,所以这里要记得加上
            mapJson.features = areaNode.getSubFeatures();
            this.loadMap(this.cityName, mapJson);
        });
    });
},
第二步,用echarts把边界数据渲染出来

我这边使用的echarts版本为当前的最新版4.2.0,相关文档查阅地址传送门:https://echarts.baidu.com/option.html#series-map。千万别看错文档了,他好几个版本放在一起,关键是每个版本某些属性会不一样,所以要特别注意文档的版本与引入的echarts版本保持一致。

1、在页面引入JS文件,我这边引入的bootstrap cdn提供的文件
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
2、注册echarts并使用刚刚通过高德API获取的数据渲染成map
//html
<div id="map"></div>

//注册并赋值给echartsMap 
this.echartsMap = this.$echarts.init(document.getElementById('map'));

//通过loadMap函数加载地图
loadMap(mapName, data) {
    if (data) {
        this.$echarts.registerMap(mapName, data);//把geoJson数据注入echarts
      //配置echarts的option
        var option = {
            visualMap: {
                type: 'piecewise',
                pieces: [
                    {max: 30, label: '安全', color: '#2c9a42'},
                    {min: 30, max: 60, label: '警告', color: '#d08a00'},
                    {min: 60, label: '危险', color: '#c23c33'},
                ],
                color: '#fff',
                textStyle: {
                    color: '#fff',
                },
                visibility: 'off'
            },
            series: [{
                name: '数据名称',
                type: 'map',
                roam: false,
                mapType: mapName,
                selectedMode: 'single',
                showLegendSymbol: false,
                visibility: 'off',
                itemStyle: {
                    normal: {
                        color: '#ccc',
                        areaColor: '#fff',
                        borderColor: '#fff',
                        borderWidth: 0.5,
                        label: {
                            show: true,
                            textStyle: {
                                color: "rgb(249, 249, 249)"
                            }
                        }
                    },
                    emphasis: {
                        areaColor: false,
                        borderColor: '#fff',
                        areaStyle: {
                            color: '#fff'
                        },
                        label: {
                            show: true,
                            textStyle: {
                                color: "rgb(249, 249, 249)"
                            }
                        }
                    }
                },
                data: this.mapData,//这个data里包含每个区域的code、名称、对应的等级,实现第三步功能时能用上
            }]
        };
        this.echartsMap.setOption(option);
    }
},

做完这一步,如果不出问题,中国地图已经安静的躺在你的屏幕上了!

第三步,实现省市区县下探功能
1、添加点击事件
this.echartsMap.on('click', this.echartsMapClick);

echartsMapClick(params) {//地图点击事件
    if (params.data.level == 'street') return;//此处的params.data为this.mapData里的数据
    this.cityCode = params.data.cityCode;
    //行政区查询
    //按照adcode进行查询可以保证数据返回的唯一性
    this.district.search(this.cityCode, (status, result) => {
        if (status === 'complete') {
            this.getData(result.districtList[0], params.data.level, this.cityCode);//这个getData函数在前面已经定义过了
        }
    });
},
此项目这边是基于VUE开发的,看完之后有什么不懂的,可以留言说明.

项目GitHub地址:https://github.com/TangSY/echarts-map-demo
省市区县geojson边界数据下载地址:https://geojson.hxkj.vip/
乡镇街道geojson下载地址:https://map.hxkj.vip文章来源地址https://www.toymoban.com/news/detail-418668.html

到了这里,关于2023年4月实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一、实现效果 使用echarts实现省市地图绘制,你也可以绘制全国地图。 根据数据在地图显示柱状图,根据经纬度实现定位。 根据数据显示数据,涟漪动态效果。 当然你也可以根据你自己的需求,增删效果哦。 二、实现方法 1、安装echarts插件 2、获取省市json数据 https://datav.

    2024年02月03日
    浏览(44)
  • 【网络安全】网络安全威胁实时地图 - 2023

    360 APT全景雷达 瑞星云安全 瑞星网络威胁态势感知平台 Bitdefender 提供的网络威胁地图服务的官方网站。 Bitdefender 的威胁地图可以显示全球网络威胁的实时情况。通过该地图,您可以了解各种类型的网络攻击,如恶意软件感染、攻击来源地、受攻击的目标和攻击类型等信息。

    2024年02月14日
    浏览(59)
  • 2000-2023年省市县人工智能企业数量数据

    2000-2023年省市县人工智能企业数量数据 1、时间:2000-2023年7月 2、指标:所属年度、所属省份、所属城市、所属区县、人工智能企业数量(省人工智能企业数量、地级市人工智能企业数量、区县人工智能企业数量) 3、来源:整理自天眼查(特定搜索人工智能企业,并保留存续

    2024年02月07日
    浏览(54)
  • uni-app封装省市区下拉组件(后台获取数据)

    一.后台数据格式  PROCINCE:[{itemName:\\\'\\\',itemValue:\\\'\\\'}] CITY:[{itemName:\\\'\\\',itemValue}] AREA:[{itemName:\\\'\\\',itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码

    2024年02月12日
    浏览(55)
  • 【uniapp+vue3+u-picker】获取中国省市区数据结构,省市区数据三级联动json文件完整版,已实现三级联动效果+省市区街道数据四级联动json文件完整版,已实现四级联动效果

    前言: 这个功能的实现,中间耽误了几天,在大佬的帮助下终于实现效果,匿名感谢xx大佬 要实现的效果如下: 1、首先需要获取省市区的数据,不考虑后端返数据,自己使用json文件的话,需要获取到完整的中国省市区数据 有个很不错的github源码可供参考,Administrative-divi

    2024年02月04日
    浏览(76)
  • Vue3使用高德地图、搜索、地图选点、以及省市区三级联动

    1、准备工作 需要在 高德开发平台 申请自己的 key 和 密钥 这里的 Key 名称大家可以随意填写 申请完之后我们得到 key 和 密钥 vue中使用需要安装**@amap/amap-jsapi-loader --save** 官方文档 2、代码实现 首先我们需要三个文件,一个 index.vue 一个用来存放省市区的 index.js 文件 一个 ma

    2024年02月05日
    浏览(75)
  • (2023进阶版)vue+h5 通过高德地图(原生) 获取当前位置定位

    前言:因为也是用的上一个版本的代码,为了描述清楚所以就直接复制文章来更改了,这一版更加完善简洁,高德地图精确度也更高 (2021年写过的一版上线了挺长时间,2023年突然被应用市场下架,说流程走不通,就卡在获取定位失败。改了之后已上线运行 经抓包发现,在 本

    2024年02月11日
    浏览(50)
  • 测牛学堂:2023软件测试入门学习指南(测试方法之边界值法)

    边界值分析法 边界值:输入数据是一个有序的集合或者范围的时候,处于集合范围的边界上的值。 边界值的几个常用的概念: 上点:边界上的点。比如条件是(1,9)那么上点就是2和9 离点:开区间的离点,就是反方向去取。(1,9) 的离点,就是2和8 内点:范围内除了上点和

    2023年04月25日
    浏览(43)
  • 【App端】uni-app使用百度地图api和echarts省市地图下钻

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(51)
  • 卡巴斯基 | 全球地区范围网络安全威胁实时数据显示地图

    卡巴斯基 卡巴斯基反病毒软件是世界上拥有最尖端科技的杀毒软件之一,总部设在俄罗斯首都莫斯科,全名“卡巴斯基实验室”,是国际著名的信息安全领导厂商之一,创始人为俄罗斯人尤金·卡巴斯基。         公司为个人用户、企业网络提供反病毒、防黑客和反垃圾

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包