遷移圖
獲取遷移城市的經緯度
可以呼叫高德的介面，實現根據地名找尋經緯度的方法
#!/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去掉，避免報錯
一頓流程走完後，資料就可以快捷的展示。