編程VS工具，Html5地圖你選誰？

們進行數(shù)據(jù)分析時，為了讓數(shù)據(jù)分析的結(jié)果更好的呈現(xiàn)，我們會選擇數(shù)據(jù)可視化。

地圖可視化實現(xiàn)的工具有多種，我們今天就單挑兩個一個是編程，一個是可以畫Html5地圖的可視化工具，這里拿億信華辰的ABI為例子。

編程：

看看上海的地鐵圖。

文本提示

首先，把鼠標移到站點、路段、圖標等位置，都會有文本提示彈出。

站點圖標變化

當鼠標移到站點上時，站點圖標做了放大效果，這個效果很貼心，

實現(xiàn)的方法也很簡便，就是在注冊站點矢量圖形時，加入了動態(tài)判斷。以下注冊普通站點矢量圖形的代碼：

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;
    }
});

動畫效果

從上圖還可以看到，在換乘站圖標中，除了增加了顏色，還實現(xiàn)了旋轉(zhuǎn)效果。。來看代碼：

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

主干線圖，世界航線線路一目了然~

△主干線圖

標點地圖，如對去過的城市進行標點著重突出。

△標點地圖

渲染地圖，可以看出投放資金的分布情況。

△資金投放分布圖

流向圖，清晰的看出從各個地區(qū)流向北京的情況。

△流向地圖

疫情大屏

可能你沒想到，使用億信ABI只需要簡單的托拉拽就可以！不需要大串大串的代碼就能輕松實現(xiàn)！還等什么呢！你也可以去體驗！

知道現(xiàn)在北京平均月薪達到多少了嗎？7你知道現(xiàn)在本科應屆大學生在北京每個月可以拿多少薪水嗎？請問孫同學面試的是什么崗位？他是做什么的？答案是他參加了兄弟連HTML5培訓，應聘的是前端開發(fā)。

北京是一個創(chuàng)新型城市，北京HTML5人才需求一向吃緊。從2007年開始，北京技術(shù)人才需求量每年以60%的上升幅度不斷增長。在北京，從事HTML5的公司數(shù)不勝數(shù)，大到國際知名企業(yè)，小到微型企業(yè)，前端開發(fā)領(lǐng)域的發(fā)展可謂實現(xiàn)了較大突破。

據(jù)相關(guān)數(shù)據(jù)統(tǒng)計顯示，HTML5人才缺口超過100萬人，從這個數(shù)字能夠看出，北京HTML5技術(shù)開發(fā)公司有著較大的用人需求。隨著每年的畢業(yè)生數(shù)量不斷增多，企業(yè)也更加注重應用技能型人才的培養(yǎng)。所以，對于大學生而言，若想高薪就業(yè)，“回爐”培訓是不錯的選擇，學習HTML5技術(shù)，重新武裝自己。

就業(yè)薪水高：同樣是大學畢業(yè)，為什么接受過HTML5培訓的學生薪水普遍高出8K，多名企搶著要呢？第一，HTML5人才缺口大，行業(yè)發(fā)展前景好，眾多名企愿意出高薪資招納優(yōu)秀人才。第二，接受過HTML5培訓的學生，擁有較好的實踐技能，動手能力及項目研發(fā)能力較強，能夠快速融入到團隊合作中。

學生在選擇培訓機構(gòu)之前可以優(yōu)先考慮機構(gòu)是否與你簽訂薪酬就業(yè)協(xié)議，有就業(yè)協(xié)議保障的機構(gòu)更值得信賴。

發(fā)展前景好：北京是一座創(chuàng)新型城市，走在時代發(fā)展的最前沿，移動互聯(lián)網(wǎng)時代的到來，催生了眾多企業(yè)對HTML5高端人才的需求。綜合考慮，在兄弟連HTML5培訓是一個正確的選擇。

用場景:百度地圖的應用往往都是在網(wǎng)上的開放式應用，用戶在不同的城市，所以在地圖初始化的時候會希望不同用戶能夠加載自己當?shù)氐牡貓D。

下面給大家介紹兩種利用百度地圖API，在用戶打開瀏覽器頁面后自動初始化為用戶所在地區(qū)地圖的方法

根據(jù)IP定位用戶位置(每一臺連上網(wǎng)路的電腦都具有一個獨一無二的IP位址，經(jīng)由IP位址可以反查出電腦位置，但是結(jié)果并不精確，而且很容易到受到ISP的IP分配機制影響，而造成誤差。本質(zhì)上，LocalCity這個類是利用用戶IP地址去百度數(shù)據(jù)庫里查詢得到IP所在的城市。)
但是代碼非常的簡潔和方便,主要代碼如下：

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>

運行效果如下：

2.Geolocation這個類是使用了支持HTML5瀏覽器提供的Geolocation API 來進行定位的。目前Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位（因為他們支持HTML5）。

var map=new BMap.Map("allmap");

var point=new BMap.Point(116.331398,39.897445);

map.centerAndZoom(point,12);

var geolocation=new BMap.Geolocation(); //實例化瀏覽器定位對象。

geolocation.getCurrentPosition(function(r){ //定位結(jié)果對象會傳遞給r變量

if(this.getStatus()==BMAP_STATUS_SUCCESS){ //通過Geolocation類的getStatus()判斷定位結(jié)果

var mk=new BMap.Marker(r.point);

map.addOverlay(mk); //將marker作為覆蓋物添加到map地圖上

map.panTo(r.point); //移動地圖中心點到當前點

setTimeout(function(){ alert('您的位置：'+r.point.lng+','+r.point.lat);},500);

}

else {alert('failed'+this.getStatus()); }

},{enableHighAccuracy: true}) //這個參數(shù)的含義就是是否要求瀏覽器獲取最佳定位結(jié)果。

</script>

運行效果如下：

以上兩種方法大家可以根據(jù)自己的實際情況來使用，有問題也可以留言討論

在線咨詢

上一篇：200塊和100萬的網(wǎng)站
下一篇：出國留學時，檔案應該放在哪兒你知道嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

編程VS工具，Html5地圖你選誰？

您的項目需求