echarts全国省市县下钻

公司需要做一个自己产品的一个模块功能,即全国省市县的下钻(离线使用)。我参考了echart官网的省市下钻,并且对项目的目录进行构思及设计,最后对各省市的json文件进行分类管理。
在刚开始的时候是调用高德的api进行获取各省市的json信息,由于项目需要离线,我第一想到的就是将拿到的信息以json形式存成文件,然后对国省市的json文件管理,使用**$.getJSON**方法按需加载相应的文件展示。json资源是我自行下载管理的,当然你们可以去网上下载已经整理好的,可能格式就需要自己修整了。我这里目前做了广东的完整下钻,其他还在努力更新中。
先看图,没弄成gif:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

各省市县Json文件按需下载

这里给个链接你们可以去网上自己下载(阿里云)
我自己是通过高德Api获取的Json,然后调用savaAs的方法生成json文件。
使用高德api需要引用高德的key,这种方式直接可以在线去调用查看,因为离线原因,所以得舍弃这个方法,去模拟数据实现。

部分代码展示

/*
* 默认显示全国
* @cityName 点击时候存储的城市名称
* @parentCode 点击时候存储的城市行政区code
* */
var cityName = ['全国'];
var parentCode = [100000];
/**
 *  利用高德api获取行政区边界geoJson
 *   adcode 行政区code 编号
 **/
getGeoJson(100000);  //100000是全国的code
function getGeoJson(adcode) {
   
  var map = new AMap.Map('map', {
   
    resizeEnable: true,
    center: [116.30946, 39.937629],
    zoom: 3
  });
  AMapUI.loadUI(['geo/DistrictExplorer'], D
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值