项目说明
1.基于Echarts开发，使用geo组件进行下钻开发；
2.项目要求做离线访问使用，即需要将geojson数据转化为.js文件；否则，加载.json文件需要通过http或https等web协议访问；
项目开发
1.不同地区调用的geojson地理数据多寡，会影响开发进度；
2.本案例仅选取一个区域作为下钻对象，并做特殊颜色标识，方便演示和操作；
3.调用散点经纬度坐标数据，采用数组(array)格式，在下钻的过程中，对对应的数据进行过滤筛选，来实现不使用$ajax函数来调用；
项目文档
目录结构
1.目录结构 ├─index.html ........默认启动页 ├─js ........封装函数 │ ├─map ........地理数据 │ ├─province........各省地理数据 ├─js ........javascript封装库 │ ├─functions.js ........公共函数配置文件 │ ├─database.js ........数据文件，具体注释
开发配置
图表配置
- 1.lockChart作为全局变量配置，在下钻的过程中或者后续和整个数据大屏进行菜单交互时，方便调用；
- 2.oBack，返回按钮，全局变量；
//设为全局函数 var lockChart = echarts.init(document.getElementById('mapBox')); var oBack = document.getElementById("back");
- 3.返回按钮的操作事件
// 点击返回按钮 oBack.onclick = function () { $('#cityBtn').addClass('hidden'); $('#countyBtn').addClass('hidden'); drillMap("新疆维吾尔自治区", "新疆维吾尔自治区", mapData); };
- 4.调用封装函数
// 初始化echarts drillMap("新疆维吾尔自治区", "新疆维吾尔自治区", mapData);
- 5.数据配置
/* * 省份城市名字拼音映射数组 * */ var provinces = { "昌吉回族自治州": "changji", } /* * 地级市对应区县名字拼音映射数组 * */ var citys = { "阜康市": "652302", } /* * 地图区域颜色 * normalColor0 ，正常情况颜色； * normalColor1，故障情况颜色 * hoverColor0，正常情况鼠标高亮颜色 * hoverColor1，故障情况鼠标高亮颜色 * */ var normalColor0 = '#0c285b'; var normalColor1 = '#9d2537';
@lockdata.cn
