【前端】中国地图资源与实现
<div id="Smap" style="width: 1400px;height:800px;margin-left: 100px;margin-top: 10px">div>
// 地图 S var MAPChart = echarts.init(document.getElementById('Smap')); //各省份的地图json文件 var provinces = { '上海': '/static/js/map/province/shanghai.json', '河北': '/static/js/map/province/hebei.json', '山西': '/static/js/map/province/shanxi.json', '内蒙古': '/static/js/map/province/neimenggu.json', '辽宁': '/static/js/map/province/liaoning.json', '吉林': '/static/js/map/province/jilin.json', '黑龙江': '/static/js/map/province/heilongjiang.json', '江苏': '/static/js/map/province/jiangsu.json', '浙江': '/static/js/map/province/zhejiang.json', '安徽': '/static/js/map/province/anwei.json', '福建': '/static/js/map/province/fujian.json', '江西': '/static/js/map/province/jiangxi.json', '山东': '/static/js/map/province/shandong.json', '河南': '/static/js/map/province/hebei.json', '湖北': '/static/js/map/province/hubei.json', '湖南': '/static/js/map/province/hunan.json', '广东': '/static/js/map/province/guangdong.json', '广西': '/static/js/map/province/guangxi.json', '海南': '/static/js/map/province/hainan.json', '四川': '/static/js/map/province/sichuang.json', '贵州': '/static/js/map/province/guizhou.json', '云南': '/static/js/map/province/yunnan.json', '西藏': '/static/js/map/province/xizang.json', '陕西': '/static/js/map/province/shanxi.json', '甘肃': '/static/js/map/province/gansu.json', '青海': '/static/js/map/province/qinghai.json', '宁夏': '/static/js/map/province/ningxia.json', '新疆': '/static/js/map/province/xinjiang.json', '北京': '/static/js/map/province/beijing.json', '天津': '/static/js/map/province/tianjin.json', '重庆': '/static/js/map/province/chongqing.json', '香港': '/static/js/map/province/xianggang.json', '澳门': '/static/js/map/province/aomen.json', }; //各省份的数据 var allData = [{ name: '北京' }, { name: '天津' }, { name: '上海' }, { name: '重庆' }, { name: '河北' }, { name: '河南' }, { name: '云南' }, { name: '辽宁' }, { name: '黑龙江' }, { name: '湖南' }, { name: '安徽' }, { name: '山东' }, { name: '新疆' }, { name: '江苏' }, { name: '浙江' }, { name: '江西' }, { name: '湖北' }, { name: '广西' }, { name: '甘肃' }, { name: '山西' }, { name: '内蒙古' }, { name: '陕西' }, { name: '吉林' }, { name: '福建' }, { name: '贵州' }, { name: '广东' }, { name: '青海' }, { name: '西藏' }, { name: '四川' }, { name: '宁夏' }, { name: '海南' }, { name: '台湾' }, { name: '香港' }, { name: '澳门' }];
// 随机生成对应的vlues值 for (var i = 0; i < allData.length; i++) { allData[i].value = Math.round(Math.random() * 100); } loadMap('/static/js/map/china.json', 'china');//初始化全国地图 var timeFn = null; //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图 MAPChart.on('click', function (params) { clearTimeout(timeFn); //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行 timeFn = setTimeout(function () { var name = params.name; //地区name var mapCode = provinces[name]; //地区的json数据 if (!mapCode) { alert('无此区域地图显示'); return; } loadMap(mapCode, name); }, 250); }); // 绑定双击事件，返回全国地图 MAPChart.on('dblclick', function (params) { //当双击事件发生时，清除单击事件，仅响应双击事件 clearTimeout(timeFn); //返回全国地图 loadMap('/static/js/map/china.json', 'china');//初始化全国地图 }); /** 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息 @params {String} mapCode:json数据的地址 @params {String} name: 地图名称 */ function loadMap(mapCode, name) { $.get(mapCode, function (data) { if (data) { echarts.registerMap(name, data); var option = { tooltip: { show: true, formatter: function (params) { if (params.data) return params.name + '：' + params.data['value'] }, }, visualMap: { type: 'continuous', text: ['', ''], showLabel: true, left: '50', min: 0, max: 100, inRange: { color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096',] }, splitNumber: 0 }, series: [{ name: 'MAP', type: 'map', mapType: name, selectedMode: 'false',//是否允许选中多个区域 label: { normal: { show: true }, emphasis: { show: true } }, data: allData }] }; MAPChart.setOption(option); // curMap = { // mapCode: mapCode, // mapName: name // }; } else { alert('无法加载该地图'); } }); }
百度云：
链接：https://pan.baidu.com/s/1lsCVLRyVcRhka4quaaU4SA
提取码：v84n
--来自百度网盘超级会员V5的分享