echarts青岛市地图下钻到区市及根据各个区市经纬度在各区市地图绘制散点图和道路线

这篇博客展示了如何使用ECharts将青岛市地图细化到区市级,并在各区市地图上绘制散点图和道路线。通过交互式下钻功能,用户可以深入查看不同区市的详细地理信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

	var myChart1 = echarts.init(document.getElementById('chart-panel1'));   //整个青岛地图绘制的dom
    var myChart2 = echarts.init(document.getElementById('chart-panel2'));   //下钻各区市绘制的dom

   // 以下是整个青岛和各区市的地图json数据,其他地图可在http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5自取
   
    var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/370200_full.json";
    var lx = "https://geo.datav.aliyun.com/areas_v2/bound/370285.json";
    var pd = "https://geo.datav.aliyun.com/areas_v2/bound/370283.json";
    var jm = "https://geo.datav.aliyun.com/areas_v2/bound/370215.json";
    var jz = "https://geo.datav.aliyun.com/areas_v2/bound/370281.json";
    var cy = "https://geo.datav.aliyun.com/areas_v2/bound/370214.json";
    var ls = "https://geo.datav.aliyun.com/areas_v2/bound/370212.json";
    var lc = "https://geo.datav.aliyun.com/areas_v2/bound/370213.json";
    var sb = "https://geo.datav.aliyun.com/areas_v2/bound/370203.json";
    var sn = "https://geo.datav.aliyun.com/areas_v2/bound/370202.json";
    var xha = "https://geo.datav.aliyun.com/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.sjz
    
    var 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.gc
    
    var 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.tq
    
    var 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.dl
    
    var 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=[];
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值