遷移圖
獲取遷移城市的經緯度
可以呼叫高德的介面,實現根據地名找尋經緯度的方法
#!/usr/bin/env python3 #-*- coding:utf-8 -*- ''' 利用高德地圖api實現地址和經緯度的轉換 ''' import requests def geocode(address): parameters = {'address': address, 'key': 'your key'} base = 'http://restapi.amap.com/v3/geocode/geo' response = requests.get(base, parameters) answer = response.json() print(answer) if answer['geocodes']==[]: print("null") else: print(address + "的經緯度:", answer['geocodes'][0]['location']) str=answer['geocodes'][0]['location'] list=str.split(',') newlist=[] for it in list: newlist.append(float(it)) print(newlist) if __name__=='__main__': #address = input("請輸入地址:") address = '邯鄲' geocode(address)
輸出對應的格式化形式,如下
var myecharts = null; var geoCoordMap = { "東臺": [ 120.67086, 32.765772 ], "東海": [ 118.77406, 34.528021 ], "豐縣": [ 116.595391, 34.693906 ], "豐涇村": [ 120.557053, 31.500551 ], "雲龍區": [ 117.25156, 34.253167 ], "儀徵市": [ 119.184766, 32.272258 ], "六合區": [ 118.821401, 32.322247 ], "吳中區": [ 120.631898, 31.264212 ], "吳江": [ 120.640272, 30.976323 ], "大豐": [ 120.686455, 33.241831 ], "太倉": [ 121.125358, 31.441361 ], "宜興": [ 119.804423, 31.362399 ], "寶應縣": [ 119.360729, 33.240392 ], "宿城區": [ 118.242534, 33.963029 ], "宿豫區": [ 118.330782, 33.946822 ], "宿遷沭陽": [ 118.275198, 33.963232 ], "宿遷泗陽": [ 118.275198, 33.963232 ], "常州市": [ 119.973987, 31.810689 ], "常熟": [ 120.757951, 31.649566 ], "建鄴區": [ 118.731694, 32.003552 ], "開發區": [ 105.204857, 37.514206 ], "徐州": [ 117.284124, 34.205768 ], "徐州雲龍區": [ 117.25156, 34.253167 ], "揚州市開發區": [ 119.427323, 32.337737 ], "新沂市": [ 118.354537, 34.36958 ], "崑山": [ 120.974177, 31.341479 ], "棲霞區": [ 118.909246, 32.096228 ], "江都區": [ 119.569989, 32.434672 ], "沛縣": [ 116.937532, 34.721656 ], "沛縣*": [ 116.937532, 34.721656 ], "泉山區": [ 117.193805, 34.244258 ], "泗陽縣": [ 118.703038, 33.72314 ], "泰興": [ 119.92869, 32.13105 ], "浦口區": [ 118.627895, 32.059093 ], "淮陰區": [ 119.034725, 33.631893 ], "玄武區": [ 118.797861, 32.048687 ], "鹽都區": [ 120.153898, 33.338094 ], "睢寧縣": [ 117.941563, 33.912598 ], "蘇州高新區": [ 120.433904, 31.329341 ], "賈汪區": [ 117.466687, 34.435506 ], "賈汪區(全市)": [ 117.466687, 34.435506 ], "賈汪區(全市)": [ 117.466687, 34.435506 ], "連雲區": [ 119.338788, 34.760249 ], "邗江區": [ 119.398015, 32.377528 ], "邳州市": [ 118.012531, 34.338888 ], "金湖縣": [ 119.020585, 33.025433 ], "銅山區": [ 117.169421, 34.1807 ], "鎮江市": [ 119.425836, 32.187849 ], "阜寧": [ 119.8295, 33.776645 ], "靖江": [ 120.265519, 31.99775 ], "高淳區": [ 118.892085, 31.328471 ], "鼓樓區": [ 114.348307, 34.788561 ] };
基礎圖表的設定
var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push([{ coord: fromCoord }, { coord: toCoord }]); } } return res; }; var color = ['#3ed4ff', '#ffa022', '#a6c84c','#d71345','#8552a1','#deab8a']; var series=[]; var option = { backgroundColor: '#080a20', title: { left: 'left', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data: [], textStyle: { color: '#fff' }, selectedMode: 'single' }, geo: { map: 'china', zoom: 1.2, label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: '#142957', borderColor: '#0692a4' }, emphasis: { areaColor: '#0b1c2d' } } }, series: series };
進行非同步互動載入資料
其中data.one|two|three等的格式為:
{ "five": [ [ { "name": "連雲區" }, { "name": "連雲區", "value": 200 } ], [ { "name": "連雲區" }, { "name": "高淳區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "建鄴區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "鼓樓區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "浦口區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "六合區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "泰興", "value": 55 } ], [ { "name": "連雲區" }, { "name": "泗陽縣", "value": 55 } ], [ { "name": "連雲區" }, { "name": "阜寧", "value": 55 } ], [ { "name": "連雲區" }, { "name": "東臺", "value": 55 } ], [ { "name": "連雲區" }, { "name": "江都區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "寶應縣", "value": 55 } ], [ { "name": "連雲區" }, { "name": "邗江區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "儀徵市", "value": 55 } ], [ { "name": "連雲區" }, { "name": "徐州雲龍區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "開發區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "豐縣", "value": 55 } ], [ { "name": "連雲區" }, { "name": "沛縣*", "value": 55 } ], [ { "name": "連雲區" }, { "name": "銅山區", "value": 55 } ], [ { "name": "連雲區" }, { "name": "睢寧縣", "value": 55 } ], [ { "name": "連雲區" }, { "name": "新沂市", "value": 55 } ], [ { "name": "連雲區" }, { "name": "賈汪區", "value": 55 } ] ], "four": [ [ { "name": "金湖縣" }, { "name": "金湖縣", "value": 200 } ], [ { "name": "金湖縣" }, { "name": "連雲區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "浦口區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "泰興", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "鹽都區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "寶應縣", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "鎮江市", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "常熟", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "開發區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "豐縣", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "沛縣*", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "銅山區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "睢寧縣", "value": 55 } ] ], "name": [ "草履蚧", "麻皮蝽", "扁刺蛾", "人紋汙燈蛾", "霜天蛾", "楊扇舟蛾" ], "one": [ [ { "name": "徐州" }, { "name": "徐州", "value": 200 } ], [ { "name": "徐州" }, { "name": "雲龍區", "value": 55 } ], [ { "name": "徐州" }, { "name": "鼓樓區", "value": 55 } ], [ { "name": "徐州" }, { "name": "泉山區", "value": 55 } ], [ { "name": "徐州" }, { "name": "開發區", "value": 55 } ], [ { "name": "徐州" }, { "name": "豐縣", "value": 55 } ], [ { "name": "徐州" }, { "name": "沛縣", "value": 55 } ], [ { "name": "徐州" }, { "name": "銅山區", "value": 55 } ], [ { "name": "徐州" }, { "name": "睢寧縣", "value": 55 } ], [ { "name": "徐州" }, { "name": "邳州市", "value": 55 } ], [ { "name": "徐州" }, { "name": "新沂市", "value": 55 } ], [ { "name": "徐州" }, { "name": "賈汪區(全市)", "value": 55 } ] ], "six": [ [ { "name": "金湖縣" }, { "name": "金湖縣", "value": 200 } ], [ { "name": "金湖縣" }, { "name": "泰興", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "靖江", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "江都區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "徐州雲龍區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "鼓樓區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "泉山區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "開發區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "豐縣", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "沛縣", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "銅山區", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "睢寧縣", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "邳州市", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "新沂市", "value": 55 } ], [ { "name": "金湖縣" }, { "name": "賈汪區(全市)", "value": 55 } ] ], "three": [ [ { "name": "東海" }, { "name": "東海", "value": 200 } ], [ { "name": "東海" }, { "name": "泰興", "value": 55 } ], [ { "name": "東海" }, { "name": "宿遷泗陽", "value": 55 } ], [ { "name": "東海" }, { "name": "宿城區", "value": 55 } ], [ { "name": "東海" }, { "name": "江都區", "value": 55 } ], [ { "name": "東海" }, { "name": "雲龍區", "value": 55 } ], [ { "name": "東海" }, { "name": "鼓樓區", "value": 55 } ], [ { "name": "東海" }, { "name": "開發區", "value": 55 } ], [ { "name": "東海" }, { "name": "豐縣", "value": 55 } ], [ { "name": "東海" }, { "name": "沛縣", "value": 55 } ], [ { "name": "東海" }, { "name": "銅山區", "value": 55 } ], [ { "name": "東海" }, { "name": "睢寧縣", "value": 55 } ], [ { "name": "東海" }, { "name": "新沂市", "value": 55 } ] ], "two": [ [ { "name": "宜興" }, { "name": "宜興", "value": 200 } ], [ { "name": "宜興" }, { "name": "常州市", "value": 55 } ], [ { "name": "宜興" }, { "name": "淮陰區", "value": 55 } ], [ { "name": "宜興" }, { "name": "金湖縣", "value": 55 } ], [ { "name": "宜興" }, { "name": "浦口區", "value": 55 } ], [ { "name": "宜興" }, { "name": "六合區", "value": 55 } ], [ { "name": "宜興" }, { "name": "玄武區", "value": 55 } ], [ { "name": "宜興" }, { "name": "棲霞區", "value": 55 } ], [ { "name": "宜興" }, { "name": "靖江", "value": 55 } ], [ { "name": "宜興" }, { "name": "宿遷沭陽", "value": 55 } ], [ { "name": "宜興" }, { "name": "宿城區", "value": 55 } ], [ { "name": "宜興" }, { "name": "宿豫區", "value": 55 } ], [ { "name": "宜興" }, { "name": "阜寧", "value": 55 } ], [ { "name": "宜興" }, { "name": "大豐", "value": 55 } ], [ { "name": "宜興" }, { "name": "東臺", "value": 55 } ], [ { "name": "宜興" }, { "name": "江都區", "value": 55 } ], [ { "name": "宜興" }, { "name": "寶應縣", "value": 55 } ], [ { "name": "宜興" }, { "name": "揚州市開發區", "value": 55 } ], [ { "name": "宜興" }, { "name": "鎮江市", "value": 55 } ], [ { "name": "宜興" }, { "name": "常熟", "value": 55 } ], [ { "name": "宜興" }, { "name": "吳中區", "value": 55 } ], [ { "name": "宜興" }, { "name": "崑山", "value": 55 } ], [ { "name": "宜興" }, { "name": "吳江", "value": 55 } ], [ { "name": "宜興" }, { "name": "蘇州高新區", "value": 55 } ], [ { "name": "宜興" }, { "name": "太倉", "value": 55 } ], [ { "name": "宜興" }, { "name": "豐涇村", "value": 55 } ], [ { "name": "宜興" }, { "name": "徐州", "value": 55 } ], [ { "name": "宜興" }, { "name": "雲龍區", "value": 55 } ], [ { "name": "宜興" }, { "name": "鼓樓區", "value": 55 } ], [ { "name": "宜興" }, { "name": "泉山區", "value": 55 } ], [ { "name": "宜興" }, { "name": "開發區", "value": 55 } ], [ { "name": "宜興" }, { "name": "豐縣", "value": 55 } ], [ { "name": "宜興" }, { "name": "沛縣", "value": 55 } ], [ { "name": "宜興" }, { "name": "銅山區", "value": 55 } ], [ { "name": "宜興" }, { "name": "睢寧縣", "value": 55 } ], [ { "name": "宜興" }, { "name": "邳州市", "value": 55 } ], [ { "name": "宜興" }, { "name": "新沂市", "value": 55 } ], [ { "name": "宜興" }, { "name": "賈汪區(全市)", "value": 55 } ] ] }
獲取對應的格式的程式碼如下:
import requests def geocode(address): parameters = {'address': address, 'key': '3409090984aea93d6ee622ffa4097165'} base = 'http://restapi.amap.com/v3/geocode/geo' response = requests.get(base, parameters) answer = response.json() print(answer) #print(address + "的經緯度:", answer['geocodes'][0]['location']) if answer['geocodes']==[]: return "null" str = answer['geocodes'][0]['location'] list = str.split(',') newlist = [] for it in list: newlist.append(float(it)) return newlist #獲取14中昆蟲的分佈資訊場所的遷移圖 @app.route('/getinsectlocation',methods=['GET','POST']) def getinsectlocation(): db = MySqLHelper() insects=['草履蚧','麻皮蝽','扁刺蛾','人紋汙燈蛾','霜天蛾','楊扇舟蛾'] names=['one','two','three','four','five','six'] result={} ans={} data=[] i=0 for it in insects: l=[] start="" f=0 sql="select * from insect where name='"+it+"'" ret, count = db.selectall(sql=sql) area="" if count != 0: for row in ret: area = row[6] list=area.split('、') for tt in list: if tt!="": if f == 0: f = 1 start = tt l2=[] vas={"name":start} if start==tt: vas2={"name":tt,"value":200} else: vas2={"name":tt,"value":55} l2.append(vas) l2.append(vas2) l.append(l2) ans[names[i]]=l i=i+1 ans["name"]=insects print(ans) return jsonify(ans)
前臺進行相應的資料展示
function fetchData() { $.post( "/getinsectlocation", function(data){ [[data.name[0], data.one], [data.name[1], data.two], [data.name[2], data.three],[data.name[3], data.four],[data.name[4], data.five],[data.name[5], data.six]].forEach(function (item, i) { //myecharts.hideLoading(); series.push({ name: item[0], type: 'lines', zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 }, lineStyle: { normal: { color: color[i], width: 0, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'lines', zlevel: 2, effect: { show: true, period: 6, trailLength: 0, symbol: planePath, symbolSize: 15 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.4, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); option.series = series; // 使用指定的配置項和資料顯示圖表 myecharts.setOption(option); }, "json" ); }
主函式執行順序:
(function () { myecharts = echarts.init($('.map .geo')[0]); myecharts.setOption(option); //myecharts.showLoading(); fetchData(); })();
成果展示
遇到的問題
一開始並沒有直接找出對應的city的經緯度值,而是呼叫高德的介面來獲取對應的值,再返回前端進行展示,發現請求量大之後,導致些許資料找不到,進而程式卡死
這樣前臺獲取不到資料,就無法展示;即使請求到前臺,經歷的時間也是使用者無法等待的。
解決方法:
因此,我就寫了一個測試介面,獲取到所有的昆蟲分佈城市的經緯度值,將其放到前端,並將一些找不到經緯度的city去掉,避免報錯
一頓流程走完後,資料就可以快捷的展示。