整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们进行数据分析时，为了让数据分析的结果更好的呈现，我们会选择数据可视化。
地图可视化实现的工具有多种，我们今天就单挑两个一个是编程，一个是可以画Html5地图的可视化工具，这里拿亿信华辰的ABI为例子。
编程：
看看上海的地铁图。
文本提示
首先，把鼠标移到站点、路段、图标等位置，都会有文本提示弹出。
站点图标变化
当鼠标移到站点上时，站点图标做了放大效果，这个效果很贴心，
实现的方法也很简便，就是在注册站点矢量图形时，加入了动态判断。以下注册普通站点矢量图形的代码：
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;
}
});
动画效果
从上图还可以看到，在换乘站图标中，除了增加了颜色，还实现了旋转效果。。 来看代码：
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
主干线图，世界航线线路一目了然~
△主干线图
标点地图，如对去过的城市进行标点着重突出。
△标点地图
渲染地图，可以看出投放资金的分布情况。
△资金投放分布图
流向图，清晰的看出从各个地区流向北京的情况。
△流向地图
疫情大屏
可能你没想到，使用亿信ABI只需要简单的托拉拽就可以！不需要大串大串的代码就能轻松实现！还等什么呢！你也可以去体验！
知道现在北京平均月薪达到多少了吗？7你知道现在本科应届大学生在北京每个月可以拿多少薪水吗？请问孙同学面试的是什么岗位？他是做什么的？答案是他参加了兄弟连HTML5培训，应聘的是前端开发。
北京是一个创新型城市，北京HTML5人才需求一向吃紧。从2007年开始，北京技术人才需求量每年以60%的上升幅度不断增长。在北京，从事HTML5的公司数不胜数，大到国际知名企业，小到微型企业，前端开发领域的发展可谓实现了较大突破。
据相关数据统计显示，HTML5人才缺口超过100万人，从这个数字能够看出，北京HTML5技术开发公司有着较大的用人需求。随着每年的毕业生数量不断增多，企业也更加注重应用技能型人才的培养。所以，对于大学生而言，若想高薪就业，“回炉”培训是不错的选择，学习HTML5技术，重新武装自己。
就业薪水高：同样是大学毕业，为什么接受过HTML5培训的学生薪水普遍高出8K，多名企抢着要呢？第一，HTML5人才缺口大，行业发展前景好，众多名企愿意出高薪资招纳优秀人才。第二，接受过HTML5培训的学生，拥有较好的实践技能，动手能力及项目研发能力较强，能够快速融入到团队合作中。
学生在选择培训机构之前可以优先考虑机构是否与你签订薪酬就业协议，有就业协议保障的机构更值得信赖。
发展前景好：北京是一座创新型城市，走在时代发展的最前沿，移动互联网时代的到来，催生了众多企业对HTML5高端人才的需求。综合考虑，在兄弟连HTML5培训是一个正确的选择。
用场景:百度地图的应用往往都是在网上的开放式应用，用户在不同的城市，所以在地图初始化的时候会希望不同用户能够加载自己当地的地图。
下面给大家介绍两种利用百度地图API，在用户打开浏览器页面后自动初始化为用户所在地区地图的方法
根据IP定位用户位置(每一台连上网路的电脑都具有一个独一无二的IP位址，经由IP位址可以反查出电脑位置，但是结果并不精确，而且很容易到受到ISP的IP分配机制影响，而造成误差。本质上，LocalCity这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市。)
但是代码非常的简洁和方便,主要代码如下：
<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>
运行效果如下：
2.Geolocation这个类是使用了支持HTML5浏览器提供的Geolocation API 来进行定位的。目前Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位（因为他们支持HTML5）。
<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(); //实例化浏览器定位对象。
geolocation.getCurrentPosition(function(r){ //定位结果对象会传递给r变量
if(this.getStatus()==BMAP_STATUS_SUCCESS){ //通过Geolocation类的getStatus()判断定位结果
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}) //这个参数的含义就是 是否要求浏览器获取最佳定位结果。
</script>
运行效果如下：
以上两种方法大家可以根据自己的实际情况来使用，有问题也可以留言讨论
*请认真填写需求信息，我们会在24小时内与您取得联系。
