var myChart1 = echarts.init(document.getElementById('chart-panel1')); //整个青岛地图绘制的domvar myChart2 = echarts.init(document.getElementById('chart-panel2')); //下钻各区市绘制的dom// 以下是整个青岛和各区市的地图json数据，其他地图可在/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5自取var uploadedDataURL = "https://geo./areas_v2/bound/370200_full.json";var lx = "https://geo./areas_v2/bound/370285.json";var pd = "https://geo./areas_v2/bound/370283.json";var jm = "https://geo./areas_v2/bound/370215.json";var jz = "https://geo./areas_v2/bound/370281.json";var cy = "https://geo./areas_v2/bound/370214.json";var ls = "https://geo./areas_v2/bound/370212.json";var lc = "https://geo./areas_v2/bound/370213.json";var sb = "https://geo./areas_v2/bound/370203.json";var sn = "https://geo./areas_v2/bound/370202.json";var xha = "https://geo./areas_v2/bound/370211.json";//下面是各数据格式，收集站、天桥、公厕都是点，道路为线var getJson1 = {"sjz":{"西海岸新区": [[ 119.57099,35.66152 ],[ 120.28342,35.980534 ],[ 120.17991,36.018932 ],[ 119.738914,35.696747 ],[ 119.74861,35.97467 ],[ 119.82879,35.75953 ] ],"胶州市": [ ],"平度市": [ [ 119.80826,36.764355 ] ],"城阳区": [ ],"李沧区": [ ],"市南区": [ ],"高新区": [ ],"崂山区": [ ],"即墨区": [ ],"市北区": [ ],"莱西市": [ ]},"tq":{"西海岸新区":[ [ 120.40598,36.133186 ] ],"胶州市": [ ],"平度市": [ [ 119.80826,36.764355 ] ],"城阳区": [ ],"李沧区": [ ],"市南区": [ [ 120.37924,36.082657 ],[ 120.38384,36.097546 ] ],"高新区": [ ],"崂山区": [ ],"即墨区": [ ],"市北区": [ ],"莱西市": [ ]},"gc"://公厕数据格式如天桥和收集站{ },"dl":{"西海岸新区":[{"name":"琅琊台路","pts":[[ 119.99633,35.87621 ],[ 119.996185,35.877193 ],[ 119.99602,35.878345 ],[ 119.99579,35.87988 ],[ 119.995544,35.881493 ],[ 119.99546,35.88193 ],[ 119.99526,35.882492 ],[ 119.99483,35.88376 ],[ 119.994354,35.885124 ],[ 119.994026,35.886093 ],[ 119.99356,35.887463 ],[ 119.993034,35.889004 ],[ 119.99262,35.890156 ],[ 119.99217,35.891483 ],[ 119.991875,35.892353 ],[ 119.99139,35.893806 ],[ 119.99091,35.895157 ],[ 119.99057,35.896164 ]]},{"name":"海尔以北工业园区综合整治二期工程","pts":[[ 120.13732,36.002594 ],[ 120.13776,36.002583 ],[ 120.13812,36.002598 ],[ 120.13832,36.00253 ],[ 120.138435,36.002426 ],[ 120.13893,36.001896 ]]}]}}//获取需要的数据// 各市区收集站var sjz = getJson1.sjzvar jmsjz = sjz['即墨区']var cysjz = sjz['城阳区']var xhasjz = sjz['西海岸新区']var jzsjz = sjz['胶州市']var pdsjz = sjz['平度市']var lcsjz = sjz['李沧区']var snsjz = sjz['市南区']var gxsjz = sjz['高新区']var lssjz = sjz['崂山区']var sbsjz = sjz['市北区']var lxsjz = sjz['莱西市']// 各市区公厕var gc = getJson1.gcvar jmgc = gc['即墨区']var cygc = gc['城阳区']var xhagc = gc['西海岸新区']var jzgc = gc['胶州市']var pdgc = gc['平度市']var lcgc = gc['李沧区']var sngc = gc['市南区']var gxgc = gc['高新区']var lsgc = gc['崂山区']var sbgc = gc['市北区']var lxgc = gc['莱西市']// 各市区天桥var tq = getJson1.tqvar jmtq = tq['即墨区']var cytq = tq['城阳区']var xhatq = tq['西海岸新区']var jztq = tq['胶州市']var pdtq = tq['平度市']var lctq = tq['李沧区']var sntq = tq['市南区']var gxtq = tq['高新区']var lstq = tq['崂山区']var sbtq = tq['市北区']var lxtq = tq['莱西市']// 各市区道路var dl = getJson1.dlvar jmDl = dl['即墨区']var cyDl = dl['城阳区']var xhaDl = dl['西海岸新区']var jzDl = dl['胶州市']var pdDl = dl['平度市']var lcDl = dl['李沧区']var snDl = dl['市南区']var gxDl = dl['高新区']var lsDl = dl['崂山区']var sbDl = dl['市北区']var lxDl = dl['莱西市']// 处理道路线var jmdl=[];var cydl=[];var xhadl=[];var jzdl=[];var pddl=[];var lcdl=[];var sndl=[];var gxdl=[];var lsdl=[];var lxdl=[];var sbdl=[];//将道路的数据转成自己想要的格式function dlLine(dlOld,dlNew){var obj = eval( dlOld);// 解析json数据for(var i=0;i<obj.length;i++){var points = [];for(var j=0;j<obj[i].pts.length;j++){// 取值经纬度points.push([obj[i].pts[j][0],obj[i].pts[j][1] ]);}// 这里在组装连线的数据，下面将用到dlNew.push({coords: points,// 坐标这个数据是必须给的name:obj[i].name,// 类似name还可以根据自己的需求给更多的数据});}}dlLine( jmDl,jmdl)dlLine( cyDl,cydl)dlLine( xhaDl,xhadl)dlLine( jzDl,jzdl)dlLine( pdDl,pddl)dlLine( lcDl,lcdl)dlLine( snDl,sndl)dlLine( sbDl,sbdl)dlLine( gxDl,gxdl)dlLine( lsDl,lsdl)dlLine( lxDl,lxdl)// 点图片散点图 此方法在下面series中调用function addImage(url, params, api, realData){ return {type: 'image',style: {image: url,//将数值在当前坐标系中转换成为屏幕上的点的像素值。x: api.coord( [(realData[params.dataIndex])[0], (realData[params.dataIndex])[1]])[0],y: api.coord( [(realData[params.dataIndex])[0], (realData[params.dataIndex])[1]])[1],width: 10,height: 10,}}}//把各个区市的数据放到相应的里面var mapname = uploadedDataURLvar mapJson = [{name: "平度市",json: pd,sites: pdczc,road: pddl,collection: pdsjz,wc: pdgc,bridge: pdtq,},{name: "崂山区",json: ls,sites: lsczc,road: lsdl,collection: lssjz,wc: lsgc,bridge: lstq,},{name: "市南区",json: sn,sites: snczc,road: sndl,collection: snsjz,wc: sngc,bridge: sntq,},{name: "市北区",json: sb,sites: sbczc,road: sbdl,collection: sbsjz,wc: sbgc,bridge: sbtq,},{name: "西海岸新区",json: xha,sites: xhaczc,road: xhadl,collection: xhasjz,wc: xhagc,bridge: xhatq,},{name: "李沧区",json: lc,sites: lcczc,road: lcdl,collection: lcsjz,wc: lcgc,bridge: lctq,},{name: "城阳区",json: cy,sites: cyczc,road: cydl,collection: cysjz,wc: cygc,bridge: cytq,},{name: "即墨区",json: jm,sites: jmczc,road: jmdl,collection: jmsjz,wc: jmgc,bridge: jmtq,},{name: "胶州市",json: jz,sites: jzczc,road: jzdl,collection: jzsjz,wc: jzgc,bridge: jztq,},{name: "莱西市",json: lx,sites: lxczc,road: lxdl,collection: lxsjz,wc: lxgc,bridge: lxtq,}]var mapDate = [{name: '平度市',value: [119.959012,36.788828]},{name: '崂山区',value: [120.467393,36.102569]},{name: '市南区',value: [120.395966,36.070892] },{name: '市北区',value: [120.355026,36.083819]},{name: '西海岸新区',value: [119.995518,35.875138]},{name: '李沧区',value: [120.421236,36.160023]},{name: '城阳区',value: [120.389135,36.306833]},{name: '即墨区',value: [120.447352,36.390847]},{name: '胶州市',value: [120.006202,36.285878]},{name: '莱西市',value: [120.526226,36.86509]}];//初始的时候myChart1显示，myCart2隐藏,infoColl是一个面板消息，在下钻到市的时候展示$('#chart-panel1').css({display:'block'})$('#chart-panel2').css({display:'none'}) $('#infoColl').css({display:'none'})//初始地图渲染var mapInit = () => {$('#infoColl').css({display:'none'})$.getJSON(mapname, function(geoJson) {console.log(geoJson);echarts.registerMap('qingdao', geoJson);option = {//backgroundColor: '#020933',title: {top: 20,subtext: '',x: 'center',textStyle: {color: '#ccc'}},tooltip: {trigger: 'item',formatter: function(params) {var chooseName = mapJson.filter(item => {return item.name == params.name})return params.name + '</br>' + '公厕' + ' : ' + chooseName[0].wc.length + '</br>'+ '收集站' + ' : ' + chooseName[0].collection.length + '</br>'+ '道路' + ' : ' + chooseName[0].road.length + '</br>'//+ '处置场' + ' : ' + chooseName[0].sites.length + '</br>'+ '过街天桥' + ' : ' + chooseName[0].bridge.length}},geo: {map: 'qingdao',aspectScale: 0.75, //长宽比geoIndex:0,zoom: 1.1,roam: true,scale: true,scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2}, itemStyle: {normal: {areaColor: '#2AB8FF',//shadowColor: '#182f68',//shadowOffsetX: 0,//shadowOffsetY: 25},emphasis: { //鼠标经过areaColor: '#0065f9',borderWidth: 0,color: 'green',label: {show: false}}}},series: [{type: 'map',geoIndex:0, //在geo和series中添加可实现同步缩放scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2}, label: {normal: {show: true,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#2ab8ff',borderWidth: 1.5,areaColor: '#12235c'},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green'}},zoom: 1.1,roam: true,scale: true,map: 'qingdao' //使用},]};myChart1.setOption(option,true);});}mapInit()//点击块时根据市名拿到各个市的数据，下钻到市myChart1.on('click', function(e) {console.log(e)var chooseName = mapJson.filter(item => {return item.name == e.name})// console.log(chooseName[0].bridge)mapname = chooseName[0].jsonconsole.log(mapname, '选择地图')mapDate = []$('#chart-panel1').css({display:'none'})$('#chart-panel2').css({display:'block'})$('#infoColl').css({display:'block'})$('<div class="back">返回青岛市</div>').appendTo($('#chart-panel2'));$('.back').css({'position': 'absolute','left': '17px','top': '25px','color': 'rgb(222,222,222)',//'border': '1px solid blue','font-size': '13px',cursor: 'pointer','z-index': '100'}) //下钻画线点$.getJSON(mapname, function(geoJson) {console.log(geoJson);echarts.registerMap('name', geoJson);option = {title: {top: 20,subtext: '',x: 'center',textStyle: {color: '#ccc'}},tooltip: {trigger: 'item',formatter: function(params) {//console.log(params)return params.name + '</br>' + '公厕' + ' : ' + chooseName[0].wc.length + '</br>'+ '收集站' + ' : ' + chooseName[0].collection.length + '</br>'+ '道路' + ' : ' + chooseName[0].road.length + '</br>'//+ '处置场' + ' : ' + chooseName[0].sites.length + '</br>'+ '过街天桥' + ' : ' + chooseName[0].bridge.length}},geo: {map: 'name',aspectScale: 0.75, //长宽比geoIndex:0,zoom: 1.1,roam: true,itemStyle: { normal: { //静态的时候展示样式areaColor: '#2AB8FF',//shadowColor: '#182f68',//shadowOffsetX: 0,//shadowOffsetY: 25},emphasis: { //鼠标经过areaColor: '#0065f9',borderWidth: 0,color: 'green',label: {show: false}}}},series: [{type: 'map',roam: true,geoIndex:0,zoom: 1,scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2},label: {normal: {show: true,textStyle: {color: '#fff'}},emphasis: {show: true,textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#2ab8ff',borderWidth: 1.5,areaColor: '#12235c',label: {show: true}},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green'}},zoom: 1.1,roam: true,scale: true,map: 'name' //使用},{// 道路type: 'lines',coordinateSystem: 'geo',// 这句的意思是连线是基于地理坐标的polyline: true,// 这表示连线是否为多端点的连线data: chooseName[0].road,// 这里就是连线的数据了 上面组装的数据就在这里使用lineStyle: {normal: {opacity: 1,width: 2,color: 'red'}},progressiveThreshold: 500,progressive: 200},{ // 收集站name: '',type: 'custom',coordinateSystem: 'geo',renderItem: function (params,api) {//具体实现自定义图标的方法return addImage("images/collection.png", params, api, chooseName[0].collection);},data: chooseName[0].collection},{ //公厕name: '',type: 'custom',coordinateSystem: 'geo',renderItem: function (params,api) {//具体实现自定义图标的方法return addImage("images/wc.png", params, api, chooseName[0].wc);},data: chooseName[0].wc},{ //过街天桥name: '',type: 'custom',coordinateSystem: 'geo',renderItem: function (params,api) {//具体实现自定义图标的方法return addImage("images/footbridge.png", params, api, chooseName[0].bridge);},data: chooseName[0].bridge}]};// setTimeout(() => {//try {// myChart2.setOption(option, true)//} catch (error) {}// }, 500)myChart2.clear() //清空历史数据myChart2.setOption(option,true); //true表重新绘制，这两个可以保证各个区市数据不会互相影响});// 返回点击$('.back').click(function() {mapname = uploadedDataURLmapDate = [{name: '平度市',value: [119.959012,36.788828, 29999]},{name: '崂山区',value: [120.467393,36.102569, 29999]},{name: '市南区',value: [120.395966,36.070892, 29999] },{name: '市北区',value: [120.355026,36.083819, 29999]},{name: '西海岸新区',value: [119.995518,35.875138, 29999]},{name: '李沧区',value: [120.421236,36.160023, 29999]},{name: '城阳区',value: [120.389135,36.306833, 29999]},{name: '即墨区',value: [120.447352,36.390847, 29999]},{name: '胶州市',value: [120.006202,36.285878, 29999]},{name: '莱西市',value: [120.526226,36.86509, 29999]}];$('.back').css({'display': 'none','position': 'absolute','left': '17px','top': '-25px','color': 'rgb(222,222,222)','font-size': '15px',cursor: 'pointer','z-index': '100'})mapInit()$('#chart-panel1').css({display:'block'})$('#chart-panel2').css({display:'none'})})})window.addEventListener('resize', function(){myChart1.style.width = window.innerWidth / 2 - 20 + 'px'; //解决canvas渲染出宽高为100myChart1.resize();myChart2.style.width = window.innerWidth / 2 - 20 + 'px'myChart2.resize();})
下面是效果图
注意，当你有多个json要请求时
var getJson1 = ""var getJson2 = ""var getJson3 = ""var getJson4 = ""var getJson5 = ""var getJson6 = ""var getJson7 = ""//一定要放在 $.ajaxSettings.async = false; 和 $.ajaxSettings.async = true;中间，不然很可能冲突获取不到数据$.ajaxSettings.async = false; $.getJSON('data.json', function(getJson){getJson1 = getJson})$.getJSON('jxhzy.json', function(getJson){getJson2 = getJson})$.getJSON('pie.json', function(getJson){getJson3 = getJson})$.getJSON('dl.json', function(getJson){getJson4 = getJson})$.getJSON('gc.json', function(getJson){getJson5 = getJson})$.getJSON('zyz.json', function(getJson){getJson6 = getJson})$.getJSON('text.json', function(getJson){getJson7 = getJson})$.ajaxSettings.async = true;
