們進(jìn)行數(shù)據(jù)分析時(shí),為了讓數(shù)據(jù)分析的結(jié)果更好的呈現(xiàn),我們會(huì)選擇數(shù)據(jù)可視化。
地圖可視化實(shí)現(xiàn)的工具有多種,我們今天就單挑兩個(gè)一個(gè)是編程,一個(gè)是可以畫(huà)Html5地圖的可視化工具,這里拿億信華辰的ABI為例子。
編程:
看看上海的地鐵圖。
文本提示
首先,把鼠標(biāo)移到站點(diǎn)、路段、圖標(biāo)等位置,都會(huì)有文本提示彈出。
站點(diǎn)圖標(biāo)變化
當(dāng)鼠標(biāo)移到站點(diǎn)上時(shí),站點(diǎn)圖標(biāo)做了放大效果,這個(gè)效果很貼心,
實(shí)現(xiàn)的方法也很簡(jiǎn)便,就是在注冊(cè)站點(diǎn)矢量圖形時(shí),加入了動(dòng)態(tài)判斷。以下注冊(cè)普通站點(diǎn)矢量圖形的代碼:
twaver.Util.registerImage('station',{
w: linkWidth*1.6,
h: linkWidth*1.6,
v: function (data, view) {
var result=[];
if(data.getClient('focus')){
result.push({
shape: 'circle',
r: linkWidth*0.7,
lineColor: data.getClient('lineColor'),
lineWidth: linkWidth*0.2,
fill: 'white',
});
result.push({
shape: 'circle',
r: linkWidth*0.2,
fill: data.getClient('lineColor'),
});
}else{
result.push({
shape: 'circle',
r: linkWidth*0.6,
lineColor: data.getClient('lineColor'),
lineWidth: linkWidth*0.2,
fill: 'white',
});
}
return result;
}
});
動(dòng)畫(huà)效果
從上圖還可以看到,在換乘站圖標(biāo)中,除了增加了顏色,還實(shí)現(xiàn)了旋轉(zhuǎn)效果。。 來(lái)看代碼:
1. twaver.Util.registerImage('rotateArrow', {
2. w: 124,
3. h: 124,
4. v: [{
5. shape: 'vector',
6. name: 'doubleArrow',
7. rotate: 360,
8. animate: [{
9. attr: 'rotate',
10. to: 0,
11. dur: 2000,
12. reverse: false,
13. repeat: Number.POSITIVE_INFINITY
14. }]
15. }]
16. });
億信ABI
主干線圖,世界航線線路一目了然~
△主干線圖
標(biāo)點(diǎn)地圖,如對(duì)去過(guò)的城市進(jìn)行標(biāo)點(diǎn)著重突出。
△標(biāo)點(diǎn)地圖
渲染地圖,可以看出投放資金的分布情況。
△資金投放分布圖
流向圖,清晰的看出從各個(gè)地區(qū)流向北京的情況。
△流向地圖
疫情大屏
可能你沒(méi)想到,使用億信ABI只需要簡(jiǎn)單的托拉拽就可以!不需要大串大串的代碼就能輕松實(shí)現(xiàn)!還等什么呢!你也可以去體驗(yàn)!
知道現(xiàn)在北京平均月薪達(dá)到多少了嗎?7你知道現(xiàn)在本科應(yīng)屆大學(xué)生在北京每個(gè)月可以拿多少薪水嗎?請(qǐng)問(wèn)孫同學(xué)面試的是什么崗位?他是做什么的?答案是他參加了兄弟連HTML5培訓(xùn),應(yīng)聘的是前端開(kāi)發(fā)。
北京是一個(gè)創(chuàng)新型城市,北京HTML5人才需求一向吃緊。從2007年開(kāi)始,北京技術(shù)人才需求量每年以60%的上升幅度不斷增長(zhǎng)。在北京,從事HTML5的公司數(shù)不勝數(shù),大到國(guó)際知名企業(yè),小到微型企業(yè),前端開(kāi)發(fā)領(lǐng)域的發(fā)展可謂實(shí)現(xiàn)了較大突破。
據(jù)相關(guān)數(shù)據(jù)統(tǒng)計(jì)顯示,HTML5人才缺口超過(guò)100萬(wàn)人,從這個(gè)數(shù)字能夠看出,北京HTML5技術(shù)開(kāi)發(fā)公司有著較大的用人需求。隨著每年的畢業(yè)生數(shù)量不斷增多,企業(yè)也更加注重應(yīng)用技能型人才的培養(yǎng)。所以,對(duì)于大學(xué)生而言,若想高薪就業(yè),“回爐”培訓(xùn)是不錯(cuò)的選擇,學(xué)習(xí)HTML5技術(shù),重新武裝自己。
就業(yè)薪水高:同樣是大學(xué)畢業(yè),為什么接受過(guò)HTML5培訓(xùn)的學(xué)生薪水普遍高出8K,多名企搶著要呢?第一,HTML5人才缺口大,行業(yè)發(fā)展前景好,眾多名企愿意出高薪資招納優(yōu)秀人才。第二,接受過(guò)HTML5培訓(xùn)的學(xué)生,擁有較好的實(shí)踐技能,動(dòng)手能力及項(xiàng)目研發(fā)能力較強(qiáng),能夠快速融入到團(tuán)隊(duì)合作中。
學(xué)生在選擇培訓(xùn)機(jī)構(gòu)之前可以優(yōu)先考慮機(jī)構(gòu)是否與你簽訂薪酬就業(yè)協(xié)議,有就業(yè)協(xié)議保障的機(jī)構(gòu)更值得信賴(lài)。
發(fā)展前景好:北京是一座創(chuàng)新型城市,走在時(shí)代發(fā)展的最前沿,移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái),催生了眾多企業(yè)對(duì)HTML5高端人才的需求。綜合考慮,在兄弟連HTML5培訓(xùn)是一個(gè)正確的選擇。
用場(chǎng)景:百度地圖的應(yīng)用往往都是在網(wǎng)上的開(kāi)放式應(yīng)用,用戶在不同的城市,所以在地圖初始化的時(shí)候會(huì)希望不同用戶能夠加載自己當(dāng)?shù)氐牡貓D。
下面給大家介紹兩種利用百度地圖API,在用戶打開(kāi)瀏覽器頁(yè)面后自動(dòng)初始化為用戶所在地區(qū)地圖的方法
根據(jù)IP定位用戶位置(每一臺(tái)連上網(wǎng)路的電腦都具有一個(gè)獨(dú)一無(wú)二的IP位址,經(jīng)由IP位址可以反查出電腦位置,但是結(jié)果并不精確,而且很容易到受到ISP的IP分配機(jī)制影響,而造成誤差。本質(zhì)上,LocalCity這個(gè)類(lèi)是利用用戶IP地址去百度數(shù)據(jù)庫(kù)里查詢得到IP所在的城市。)
但是代碼非常的簡(jiǎn)潔和方便,主要代碼如下:
<div id="allmap"></div>
<script type="text/javascript">
var map=new BMap.Map("allmap");
var myCity=new BMap.LocalCity();
myCity.get(myFun);
function myFun(result){
var cityName=result.name;
map.centerAndZoom(cityName,15);
setTimeout(function(){alert(cityName)},500);
}
</script>
運(yùn)行效果如下:
2.Geolocation這個(gè)類(lèi)是使用了支持HTML5瀏覽器提供的Geolocation API 來(lái)進(jìn)行定位的。目前Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位(因?yàn)樗麄冎С諬TML5)。
<div id="allmap"></div>
<script type="text/javascript">
var map=new BMap.Map("allmap");
var point=new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geolocation=new BMap.Geolocation(); //實(shí)例化瀏覽器定位對(duì)象。
geolocation.getCurrentPosition(function(r){ //定位結(jié)果對(duì)象會(huì)傳遞給r變量
if(this.getStatus()==BMAP_STATUS_SUCCESS){ //通過(guò)Geolocation類(lèi)的getStatus()判斷定位結(jié)果
var mk=new BMap.Marker(r.point);
map.addOverlay(mk); //將marker作為覆蓋物添加到map地圖上
map.panTo(r.point); //移動(dòng)地圖中心點(diǎn)到當(dāng)前點(diǎn)
setTimeout(function(){ alert('您的位 置:'+r.point.lng+','+r.point.lat);},500);
}
else {alert('failed'+this.getStatus()); }
},{enableHighAccuracy: true}) //這個(gè)參數(shù)的含義就是 是否要求瀏覽器獲取最佳定位結(jié)果。
</script>
運(yùn)行效果如下:
以上兩種方法大家可以根據(jù)自己的實(shí)際情況來(lái)使用,有問(wèn)題也可以留言討論
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。