echarts写地图，调用本地地图json数据，实现秒下钻功能 |
您所在的位置：网站首页 › echarts地图数据匹配 › echarts写地图，调用本地地图json数据，实现秒下钻功能 |
echarts写地图，调用本地地图json数据，实现秒下钻功能
|
先来一波效果图 放整体代码 返回上级 import cityMap from "./js/china-main-city-map";//展示每个省的id import * as echarts from "echarts"; import axios from "axios"; import { getPoint} from "/@/api/homeApi"; //中国地图（第一级地图）的ID、Name、Json数据 var chinaId = 100000; var chinaName = "china"; var chinaJson = null; //记录父级ID、Name var mapStack = []; var parentId = null; var parentName = null; //Echarts地图全局变量，主要是在返回上级地图的方法中会用到 var myChart = null; var aaa = "111"; export default { name: "chinaMap", props: { msg: String, }, data() { return { radio: "全部应用", mapDate6: [], }; }, mounted() { this.getallpoints({}) }, methods: { //这是接口获取点位坐标 返回的是经纬度的 getallpoints(param) { let res = getPoint({ ...param, }); res.then((res) => { this.mapDate6 = res.data; this.mapDate6.forEach((item)=>{ item.name = item.province }) this.mapChart();//获取数据成功构建地图 }).catch(()=>{ this.mapChart();//如果没有网络也让构建地图 }); }, // 返回上一级地图 back() { if (mapStack.length != 0) { //如果有上级目录则执行 var map = mapStack.pop(); axios .get("../../../public/map/" + map.mapId + ".json", {}) .then((response) => { const mapJson = response.data; this.getecharts(myChart, map.mapId, map.mapName, mapJson, false); parentId = map.mapId; parentName = map.mapName; }); } }, //获取本地地图信息 mapChart() { axios .get("../../../public/map/" + chinaId + ".json") .then((response) => { const mapJson = response.data; chinaJson = mapJson; myChart = echarts.init(this.$refs.mapdd); this.getecharts(myChart, chinaId, chinaName, mapJson, false); parentId = chinaId; parentName = "china"; myChart.on("click", (param) => { var cityId = cityMap[param.name]; if (cityId) { //代表有下级地图 axios .get("../../../public/map/" + cityId + ".json", {}) .then((response) => { const mapJson = response.data; this.getecharts(myChart, cityId, param.name, mapJson, true); }); } else { //没有下级地图，回到一级中国地图，并将mapStack清空 this.getecharts(myChart, chinaId, chinaName, chinaJson, false); mapStack = []; parentId = chinaId; parentName = chinaName; } }); }) .catch((res) => { console.log("错误信息", res); }); }, //echarts构建地图和点位信息 getecharts(myChart, id, name, mapJson, flag) { echarts.registerMap(name, { geoJSON: mapJson }); myChart.setOption({ baseOption: { geo:{ map:name, aspectScale: 0.75, zoom:1, layoutSize:'100%', label:{ color:'#fff' }, zoom:1.2, itemStyle:{ areaColor:{ type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "rgba(175,238,238, 0)", // 0% 处的颜色 }, { offset: 1, color: "rgba(47,79,79, .1)", // 100% 处的颜色 }, ], globalCoord: true, // 缺省为 false } } }, series: [ { type: "map", map: name, zoom:1.2, //每一块区域的颜色 itemStyle: { normal: { label: { show: true }, borderColor: "rgba(147, 235, 248, 1)", borderWidth: 2, areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "rgba(175,238,238, 0)", // 0% 处的颜色 }, { offset: 1, color: "rgba(47,79,79, .1)", // 100% 处的颜色 }, ], globalCoord: true, // 缺省为 false }, shadowColor: "rgba(128, 217, 248, 1)", //阴影的颜色 shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10, }, // 鼠标当前所在的区域块的相关设置 emphasis: { areaColor: "rgba(96, 167, 255,0.3)", //区域块的颜色 borderWidth: 2, textStyle: { color: "#fff", }, }, }, label: { normal: { textStyle: { fontSize: 16, fontWeight: "bold", color: "#fff", }, }, emphasis: { textStyle: { color: "#fff", fontSize: 16, }, }, }, layoutCenter: ["50%", "70%"], //地图位置 regions: [ { name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, }, }, }, ], data: this.initmapdata(mapJson), }, { name: '点位', type: 'effectScatter', coordinateSystem: 'geo', data: this.mapDate6, symbolSize: 20, hoverAnimation: true, itemStyle: { normal: { color: '#f4e925', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ], }, }); if (flag) { //往mapStack里添加parentId，parentName,返回上一级使用 mapStack.push({ mapId: parentId, mapName: parentName, }); parentId = id; parentName = name; } }, initmapdata(mapJson) { var mapData = []; for (var i = 0; i name: mapJson.features[i].properties.name, }); } return mapData; }, }, };链接及其提取码 链接：https://pan.baidu.com/s/1kNohTWOe_1K9xFAloD_ErA 提取码：dhah –来自百度网盘超级会员V5的分享 china-main-city-map.js 的代码自己拷贝吧 const cityMap = { "安徽": "340000", "澳门": '820000', "北京": '110000', "重庆": '500000', "福建": '350000', "甘肃": '620000', "广东": '440000', "广西": "450000", "贵州": '520000', "海南": '460000', "河北": '130000', "黑龙江": '230000', "河南": '410000', "湖北": '420000', "湖南": '430000', "江苏": '320000', "江西": '360000', "吉林": '220000', "辽宁": '210000', "内蒙古": '150000', "宁夏": '640000', "青海": '630000', "山东": '370000', "上海": '310000', "山西": '140000', "四川": '510000', "台湾": '710000', "天津": '120000', "新疆": '650000', "陕西": '610000', "西藏": '540000', "云南": '530000', "浙江": '330000', "香港": '810000', "北京市": "110100", "天津市": "120100", "上海市": "310100", "重庆市": "500100", "崇明县": "310200", "湖北省直辖县市": "429000", "铜仁市": "522200", "毕节市": "522400", "石家庄市": "130100", "唐山市": "130200", "秦皇岛市": "130300", "邯郸市": "130400", "邢台市": "130500", "保定市": "130600", "张家口市": "130700", "承德市": "130800", "沧州市": "130900", "廊坊市": "131000", "衡水市": "131100", "太原市": "140100", "大同市": "140200", "阳泉市": "140300", "长治市": "140400", "晋城市": "140500", "朔州市": "140600", "晋中市": "140700", "运城市": "140800", "忻州市": "140900", "临汾市": "141000", "吕梁市": "141100", "呼和浩特市": "150100", "包头市": "150200", "乌海市": "150300", "赤峰市": "150400", "通辽市": "150500", "鄂尔多斯市": "150600", "呼伦贝尔市": "150700", "巴彦淖尔市": "150800", "乌兰察布市": "150900", "兴安盟": "152200", "锡林郭勒盟": "152500", "阿拉善盟": "152900", "沈阳市": "210100", "大连市": "210200", "鞍山市": "210300", "抚顺市": "210400", "本溪市": "210500", "丹东市": "210600", "锦州市": "210700", "营口市": "210800", "阜新市": "210900", "辽阳市": "211000", "盘锦市": "211100", "铁岭市": "211200", "朝阳市": "211300", "葫芦岛市": "211400", "长春市": "220100", "吉林市": "220200", "四平市": "220300", "辽源市": "220400", "通化市": "220500", "白山市": "220600", "松原市": "220700", "白城市": "220800", "延边朝鲜族自治州": "222400", "哈尔滨市": "230100", "齐齐哈尔市": "230200", "鸡西市": "230300", "鹤岗市": "230400", "双鸭山市": "230500", "大庆市": "230600", "伊春市": "230700", "佳木斯市": "230800", "七台河市": "230900", "牡丹江市": "231000", "黑河市": "231100", "绥化市": "231200", "大兴安岭地区": "232700", "南京市": "320100", "无锡市": "320200", "徐州市": "320300", "常州市": "320400", "苏州市": "320500", "南通市": "320600", "连云港市": "320700", "淮安市": "320800", "盐城市": "320900", "扬州市": "321000", "镇江市": "321100", "泰州市": "321200", "宿迁市": "321300", "杭州市": "330100", "宁波市": "330200", "温州市": "330300", "嘉兴市": "330400", "湖州市": "330500", "绍兴市": "330600", "金华市": "330700", "衢州市": "330800", "舟山市": "330900", "台州市": "331000", "丽水市": "331100", "合肥市": "340100", "芜湖市": "340200", "蚌埠市": "340300", "淮南市": "340400", "马鞍山市": "340500", "淮北市": "340600", "铜陵市": "340700", "安庆市": "340800", "黄山市": "341000", "滁州市": "341100", "阜阳市": "341200", "宿州市": "341300", "六安市": "341500", "亳州市": "341600", "池州市": "341700", "宣城市": "341800", "福州市": "350100", "厦门市": "350200", "莆田市": "350300", "三明市": "350400", "泉州市": "350500", "漳州市": "350600", "南平市": "350700", "龙岩市": "350800", "宁德市": "350900", "南昌市": "360100", "景德镇市": "360200", "萍乡市": "360300", "九江市": "360400", "新余市": "360500", "鹰潭市": "360600", "赣州市": "360700", "吉安市": "360800", "宜春市": "360900", "抚州市": "361000", "上饶市": "361100", "济南市": "370100", "青岛市": "370200", "淄博市": "370300", "枣庄市": "370400", "东营市": "370500", "烟台市": "370600", "潍坊市": "370700", "济宁市": "370800", "泰安市": "370900", "威海市": "371000", "日照市": "371100", "莱芜市": "371200", "临沂市": "371300", "德州市": "371400", "聊城市": "371500", "滨州市": "371600", "菏泽市": "371700", "郑州市": "410100", "开封市": "410200", "洛阳市": "410300", "平顶山市": "410400", "安阳市": "410500", "鹤壁市": "410600", "新乡市": "410700", "焦作市": "410800", "濮阳市": "410900", "许昌市": "411000", "漯河市": "411100", "三门峡市": "411200", "南阳市": "411300", "商丘市": "411400", "信阳市": "411500", "周口市": "411600", "驻马店市": "411700", "省直辖县级行政区划": "469000", "武汉市": "420100", "黄石市": "420200", "十堰市": "420300", "宜昌市": "420500", "襄阳市": "420600", "鄂州市": "420700", "荆门市": "420800", "孝感市": "420900", "荆州市": "421000", "黄冈市": "421100", "咸宁市": "421200", "随州市": "421300", "恩施土家族苗族自治州": "422800", "长沙市": "430100", "株洲市": "430200", "湘潭市": "430300", "衡阳市": "430400", "邵阳市": "430500", "岳阳市": "430600", "常德市": "430700", "张家界市": "430800", "益阳市": "430900", "郴州市": "431000", "永州市": "431100", "怀化市": "431200", "娄底市": "431300", "湘西土家族苗族自治州": "433100", "广州市": "440100", "韶关市": "440200", "深圳市": "440300", "珠海市": "440400", "汕头市": "440500", "佛山市": "440600", "江门市": "440700", "湛江市": "440800", "茂名市": "440900", "肇庆市": "441200", "惠州市": "441300", "梅州市": "441400", "汕尾市": "441500", "河源市": "441600", "阳江市": "441700", "清远市": "441800", "东莞市": "441900", "中山市": "442000", "潮州市": "445100", "揭阳市": "445200", "云浮市": "445300", "南宁市": "450100", "柳州市": "450200", "桂林市": "450300", "梧州市": "450400", "北海市": "450500", "防城港市": "450600", "钦州市": "450700", "贵港市": "450800", "玉林市": "450900", "百色市": "451000", "贺州市": "451100", "河池市": "451200", "来宾市": "451300", "崇左市": "451400", "海口市": "460100", "三亚市": "460200", "三沙市": "460300", "成都市": "510100", "自贡市": "510300", "攀枝花市": "510400", "泸州市": "510500", "德阳市": "510600", "绵阳市": "510700", "广元市": "510800", "遂宁市": "510900", "内江市": "511000", "乐山市": "511100", "南充市": "511300", "眉山市": "511400", "宜宾市": "511500", "广安市": "511600", "达州市": "511700", "雅安市": "511800", "巴中市": "511900", "资阳市": "512000", "阿坝藏族羌族自治州": "513200", "甘孜藏族自治州": "513300", "凉山彝族自治州": "513400", "贵阳市": "520100", "六盘水市": "520200", "遵义市": "520300", "安顺市": "520400", "黔西南布依族苗族自治州": "522300", "黔东南苗族侗族自治州": "522600", "黔南布依族苗族自治州": "522700", "昆明市": "530100", "曲靖市": "530300", "玉溪市": "530400", "保山市": "530500", "昭通市": "530600", "丽江市": "530700", "普洱市": "530800", "临沧市": "530900", "楚雄彝族自治州": "532300", "红河哈尼族彝族自治州": "532500", "文山壮族苗族自治州": "532600", "西双版纳傣族自治州": "532800", "大理白族自治州": "532900", "德宏傣族景颇族自治州": "533100", "怒江傈僳族自治州": "533300", "迪庆藏族自治州": "533400", "拉萨市": "540100", "昌都地区": "542100", "山南地区": "542200", "日喀则地区": "542300", "那曲地区": "542400", "阿里地区": "542500", "林芝地区": "542600", "西安市": "610100", "铜川市": "610200", "宝鸡市": "610300", "咸阳市": "610400", "渭南市": "610500", "延安市": "610600", "汉中市": "610700", "榆林市": "610800", "安康市": "610900", "商洛市": "611000", "兰州市": "620100", "嘉峪关市": "620200", "金昌市": "620300", "白银市": "620400", "天水市": "620500", "武威市": "620600", "张掖市": "620700", "平凉市": "620800", "酒泉市": "620900", "庆阳市": "621000", "定西市": "621100", "陇南市": "621200", "临夏回族自治州": "622900", "甘南藏族自治州": "623000", "西宁市": "630100", "海东地区": "632100", "海北藏族自治州": "632200", "黄南藏族自治州": "632300", "海南藏族自治州": "632500", "果洛藏族自治州": "632600", "玉树藏族自治州": "632700", "海西蒙古族藏族自治州": "632800", "银川市": "640100", "石嘴山市": "640200", "吴忠市": "640300", "固原市": "640400", "中卫市": "640500", "乌鲁木齐市": "650100", "克拉玛依市": "650200", "吐鲁番地区": "652100", "哈密地区": "652200", "昌吉回族自治州": "652300", "博尔塔拉蒙古自治州": "652700", "巴音郭楞蒙古自治州": "652800", "阿克苏地区": "652900", "克孜勒苏柯尔克孜自治州": "653000", "喀什地区": "653100", "和田地区": "653200", "伊犁哈萨克自治州": "654000", "塔城地区": "654200", "阿勒泰地区": "654300", "自治区直辖县级行政区划": "659000", "台湾省": "710000", "香港特别行政区": "810100", "澳门特别行政区": "820000" } export default cityMap就这样，获取地图，地图下钻，返回上一级，添加点位的功能都有了 有些省份名字不在省边界的中间大家可以自己百度找，这个很容易找的 欢迎探讨 |
这是我用vue框架的echarts写的一个地图，下面会放整体代码并且把重要的配置代码上传到我的百度网盘，并且代码给出注释 首先我所了解的，要想实现全局的地图和地图下钻，有两种方式： 1.调用百度地图或者高德地图的API，需要再他们网站生成SDK再js引入，调用他们的API生成地图数据展示和实现地图下钻功能，缺点是网速不是很快的时候，会出现严重的卡顿问题 2.在本地放置json数据，调用本地数据，优势在于地图下钻很快 首先先展示的事中国的数据，使用axios来调用json数据 后面会放整体代码和json数据包,json数据包可是我花钱买的，操!【本文地址】
今日新闻 |
推荐新闻 |