公司需要做一个自己产品的一个模块功能,即全国省市县的下钻(离线使用)。我参考了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