大数据美食——寻找地图上的美味

来源:互联网
更新时间:2018/2/15 15:33:02
责任编辑:李佳
字体:

在线技术公开课预告】9月8日,来自阿里数据引擎数据可视化团队的闻啸 (花名:宁朗)将通过DataV团队在数据产品和数据大屏两个应用场景中的数据可视化实践案例,向大家分享开发过程中的信息设计思考和技术实现细节。欢迎关注数据可视化的开发者报名:http://edu.csdn.net/huiyiCourse/detail/188


上次分享了《 教你30分钟创建汽车大屏》后,来咨询的人很多,其中地图可视化的问题最集中,这次我花了点时间,准备了一份美食相关的测试数据,向大家分享《寻找地图上的美味》是如何做成的。

很多人看到 DataV 里地图的一堆配置就很头疼,不知道怎么用,能做什么,这里先来教大家“技能加点”。

先从这4个地图组件的区别看起

1dfe2fdb606aeb98467d74737b7abee36c305167

打开数据面板上,第一个地图提供了3 种数据接口:点、图标、飞线。

  

其中点和飞线这里先不讲,后面会大讲。图标实际上就是允许把一些图片,比如头像、logo、icon,根据经纬度显示在地图上。

如果我想看麦当劳和肯德基的分布情况,就可以 Logo 当做“点”显示在地图上,你看下面那张图,德克士简直就像番茄炒蛋中的葱花!

第二个地图是一个3D的地球,除了点和飞线,多了区域热力图和geojson。

这个地图是  DataV 的地图专家开发的一个性能超级好的 3D 带地貌、光照的组件,在去年双十一的时候也有用到。

区域热力图实际就是根据行政区域划分的热力图,通常表达以行政区域划分的指标。比如:人口、收入、GDP…… 

热力图的效果就是上图中彩色的部分,颜色越深代表数值越高。 

这个组件默认显示的是全国地图,那么如果只想要显示某一个具体的省份怎么办呢?

如下图:

fa5b49cca0024924419ee5923605a5579e5b3051

首先我们要知道现在看到的地图是通过 geojson 这个接口来定义的,这个接口详细地定义了地图上的每一个行政区和每一个条线。

所以要想只显示一个省就必须要改变这个 geojson, DataV   提供了一个工具来方便地生成geojson =>  传送门  http://datav.aliyun.com/static/tools/atlas

在页面中点击四川省,地图会缩放到四川省的地图,并把“下一级”每个市、州画出来。然后再点击左边的 geojson 下载,把下载文件中的内容复制粘贴到 geojson 接口里就可以了。(粘贴进去之后要刷新页面才能看到效果哦)

改好geojson之后,就会看到一个纯色的四川省地图。这时就要将热力图数据对应到新的地图上了。

很多地图接口都使用一个叫 adcode  的东西,这是我国的行政区划代码,其精度到区县一级。大家可以看看自己的身份证号码,比如我的身份证是 510113yyyymmddxxsv  这 510113  就代表了我是 51  四川省 01  成都市 13  青白江区的人。

在使用 adcode  的时候,我们始终保持6位数字来使用,位数不足就补 0。比如要表达成都市,代码就是 510100 。

所以我通过用这样一句 SQL  就能渲染出上图的效果。

fddf7f216d6a4748b1dc7dd05107c80dcc6083a1

第三个地图数据会多一些,首先他是第二个地图的2D 版本,使用了geojson来描绘地图。

其次,比第二个地图增加了轨迹和多边形两个接口。

看示例数据我们就能知道,多边形接口可以在地图上画出 “多边形 ”、 “圆形 ”、 “矩形 ”三种图形,数据结构也如表达所示。

多边形的接口可以在地图上画出你所关心的区域,如果你关注西湖商圈,那么就可以用他的数据把西湖商圈圈出来。现在暂时没有提供画圈的工具,不过要想找到想要的经纬度,可以去各家地图上面找哦。

[{
  "type": "polygon",
  "id": 1,
  "latlngs": [
    { "lat": 30, "lng": 120 },
    { "lat": 32, "lng": 122 },
    { "lat": 29, "lng": 115 },
    { "lat": 29.5, "lng": 119 },
    { "lat": 30, "lng": 120 }
  ]
},
{
  "type": "circle",
  "id": 2,
  "center": { "lat": 40, "lng": 110 },
  "radius": 1000000
},
{
  "type": "rect",
  "id": 4,
  "latlngs": [
    { "lat": 33, "lng": 112 },
    { "lat": 45, "lng": 120 }
  ]
}]

路径可以表达一些连线或者移动数据,比如可以展示某个人从A店到了B店再到C店的路径……

具体数据格式可以参照组件默认提供的静态数据来了解。

最后一个地图和第二个地图很类似,不过没有了地球,也没有了geojson,但它可以3D旋转。

我最终得出一个结论。

我的那份杭州餐饮业的数据,区域限定在了杭州市区,所以我只关心街道,不用关心行政区划,这样看来,明显第一个地图组件最合适我。

606f2b5d7607137b60073a8a18e296914728421e

先把地图拖满全屏,如果觉得不方便的话,可以在面板最下面直接输入数据:

改个配色,一定要有科技范~阿里云进军的是 International market,逼格太高会跟不上!

先通过前三个配置把初始化的视点控制在杭州市区的区域。

注意不要去拖动经度纬度的那个拖动条。太敏感了……一秒钟去太平洋的节奏。还是在右边的输入框慢慢调吧。

最近口味比较怪,随意调一个粉绿色,简直太好用了!

ff68cce32aeab0328c840cf41859d15ae7a28beb

好了,样子出来了,现在可以安心地接数据了。

小手一抖,写下查询全杭州店铺的SQL,效果如图。

细心的小朋友就能发现为什么河对面没有点?

原因是 DataV 在编辑状态的时候自动给每个请求加上了2000行数据的限制。

如果自己加上 limit 就可以突破这个限制。

但是如果数据量太大,为了平衡各个用户的资源,时间超过了3秒的请求会触发超时。

那样只能用 https://yq.aliyun.com/articles/55879 这种方法来自己搭建数据库的代理了。

杭州的餐厅数据还真是不少,如果我想要知道哪里的餐厅多哪里的餐厅少,怎么办呢?

如下图,到面板里找到系列1,把边框粗细设置为0,然后把颜色的透明底降低就好了。这样餐厅越密集,颜色就会越“亮”。

点的半径调小,地图放大,就可以看到更清晰的分布了。

那么如果我想知道哪里的餐厅贵呢?

再来回顾一下我的 SQL

select shopName as name, 
glat as lat, glng as lng,
"ok" as type,
avgPrice as value /* 把均价加入value */
from xxxx
where score > 80
limit 4000

如下图,将数据映射打开,就能根据前面的 value 字段(均价)来显示不同的大小和颜色了。

但我们会发现效果并不明显,原因可能是因为部分店的均价过于高了。

那我就将过高,和过低的均价都排除掉。

如下图,修改一下均价限制就能发现湖滨商圈真的是不仅仅店多,而且都是中等偏贵的,往东中和高架就会稍微好一点。

龙井山上要么便宜要么贵,中档的很少。

而在城西,从教工路以西就非常实惠了。

怎么样?比看商圈报告方便吧。

作为一个文艺小屌丝,自然还是要关心一下什么地方咖啡馆多?什么地方烧烤多?什么地方酒吧多?[我要看美女]

DataV最多允许画3种类型点(已经踢码农的屁股,让他们赶紧加了)

每种类型的点有个key,这个是要和数据对应上的。

我就设置了3个key:type1, type2, type3

轻轻松松把 SQL 改造成这样:

(select shopName as name, glat as lat, glng as lng, avgPrice as value,
        "type1" as type
   from xxxx
  where 类型="咖啡厅")
  union 
(select shopName as name, glat as lat, glng as lng, avgPrice as value,
        "type2" as type
   from xxxx
  where 类型="酒吧")
  union 
(select shopName as name, glat as lat, glng as lng, avgPrice as value,
        "type3" as type
   from xxxx
  where 类型=“烧烤”)

如图:蓝色是烧烤,红色是酒吧,黄色是咖啡厅。

[惊讶face] 果然是西湖北岸泡吧,东岸喝咖啡,遍地撸串……

再看看菜系的分布,江浙菜、川菜、粤菜分别为:黄、红、蓝

景区几乎全是江浙菜,川菜渗透进了各个区域,粤菜就几乎只有城北才有。滨江是不是还有机会呢。

最后我们看看什么是飞线,飞线一般用来表达两点之间的关系,比如某个人从A到了B,或者某个A和B完成了一次合作……

我并没有这样的数据,我用这句 SQL 模拟了 宴西湖 和 兰桂坊花园餐厅 发生了关系。

select 
  concat(glng, ',', glat) as "from", 
  b.to
from stats as a
left join 
  (select concat(glng, ',', glat) as "to" from stats where 标题 = "宴西湖") as b on 1=1
where 标题 = "兰桂坊花园餐厅"

这样就得到了一条飞线。 

  

0c482944dde7d76781369b164de80ebd4f552eb4

前面讲这么多都只是展示,能不能交互呢?

22554f8a1c65805684205b893cc30967844436e9

当然可以。

怎么去增加框和图表我就不讲了。

这里我用:

两个标题组件,其中一个设置数据源去查询类目。

两个折线图组件,黄线表示“基线”,绿线表示类目下的统计结果。

一个图片组件、两个 form 组件

不知道刚才你有没有注意到“回调ID”这个参数,他代表“当点击地图这个某个点的时候,给所有组件传入这个参数”。

简单来说就是定义了一个参数,那么这个参数从哪里来呢?

如上图,我将“回调ID”定义成了id

select
  ..., 
  someFile as id,
  ..., lat, lng, type
from xxx;

只要在前面的SQL中加上id即可。

那么怎么用呢?

看下图,在SQL中写 :id 即可引用这个参数 

 

但事实上,当你做到这一步的时候,你的页面会是这个样子。

566a52d1288779189a6817e24a844d90d692e41f

其实这只是因为你还没有点击任何一个“点”,所以id是没有数据的,为了方便开发,你可以在页面的 url 中传入一个默认的 id,

默认情况下,点击一个点的时候会显示一个弹出框,框里显示的是 name 和 info 字段,在前面的 SQL 中我已经将标题命名成了 name 字段,在这里只需要再加入 info 就可以了。

select
  ..., 
  someFile as id,
  标题 as name,
  concat("口味:",口味," 环境:",环境, " 服务:",服务,"<br/>",地址) as info,
  ..., lat, lng, type
from xxx;

那么最终大屏就会变成这样(当然要进预览页面才会有交互,FYI,龙井路上的这家绿茶我非常喜欢)

 

好了,今天就讲这么多。

大家还想了解什么,给我留言哦。

2bb807d27ccea6b766d71a106c7c6f867493e044  head-spot.png?59229 


本文经授权,转载自 阿里云栖社区。更多技术分享,欢迎关注 阿里云栖大讲堂

根据您访问的内容,您可能还对以下内容感兴趣,希望对您有帮助:

大数据里面,高德地图有哪些功能

答:交通路况实时播报 为用户搜索地点 智能计算到达目的地所需的时间 避堵路线方案规划

大数据分析报告中,这种带路线的地图怎么做出来的...

答:看看这个呢,也是很绚丽,数据可视化分析工具:大数据魔镜,导入数据直接作图,颜色可自己搭配,还很多分析挖掘功能。

大数据下为什么要进行地图可视化

答:这个很简单啊,就是为了很直观的看到各个地域的数据量的分布情况啊,或者是百分比情况啊,一般都是用不同的颜色或是颜色深浅来直观的展示数据,以下是给你的一个演示,你也可以自己去体验下,这个工具在线是永久免费的 作图工具:大数据魔镜

百度地图背后的大数据能飞起来吗

答:现在百度地图方面的大数据是用的很不错的啊,百度地图的路况分析,给出你嘴快捷的路线,高峰期会给出你不堵车的路线,这是典型的地图大数据分析产生的结果埃柠檬学院大数据。

大数据分析报告中,这种带路线的地图怎么做出来的

答:看看这个呢,也是很绚丽,数据可视化分析工具:大数据魔镜,导入数据直接作图,颜色可自己搭配,还很多分析挖掘功能。大数据分析报告中,这种带路线的地图怎么做出来的

大数据 map 和 reducer 的区别

答:(1)hive使用:仓库、工具 (2)hive内外部表:内部表数据永久删除,外部表数据删除后、其他人依然可以访问 (3)分区作用:防止数据倾斜 (4)UDF函数:用户自定义的函数(主要解决格式,计算问题),需要继承UDF类

如何在地图上进行大数据可视化?

答:可以实现这种地图+柱状图,就是统计地图,如下图~ 数据地图的操作可以参加下这个:http://t.cn/R09jCeu,步骤比较直观了。

央视高德地图统计的大数据是怎样实现

答:当然是通过统计咯

百度地图大数据在哪里查看

答:百度地图不是有一个图标,蓝色的,在左下角,那个就是确定自己的位置的 -

百度制作的百度地图春节人口迁徙大数据是采用那一...

答:数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。 它是一个处于不断演变之中的概念,其边界在不断地扩大。主要指的是技术上较...


www.xue163.net true http://www.xue163.net/exploit/184/1843343.html report 34122 大数据美食——寻找地图上的美味,在线技术公开课预告】9月8日,来自阿里数据引擎数据可视化团队的闻啸(花名:宁朗)将通过DataV团队在数据产品和数据大屏两个应用场景中的数据可视化实践案例,向大家分享开发过程中的信息设计思考和技术实现细节。欢迎关注数据可视化的开发者报名:http:/...
网友评论
最新添加资讯
24小时热门资讯
娱乐时尚
科技资讯
历史文化
真视界
旅游美食
精彩图文
我爱我车
母婴健康
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2018 xue163.net All Rights Reserved. 学网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
教育考试: 学历财经建筑 医药公考资格外语电脑作文招聘中小学留学 文档 移民 文库专栏23问答中心问答图书馆知识IT编程数码信息解决方案信息中心IT科技topzttophottopsctopnew问答新闻中心软件教室设计大全网络相关英语学习开发编程考试中心参考范文管理文库营销中心站长之家IT信息中心商学院数码大全硬件DIY企业服务网吧在线百科硬件知识手机平板汽车游戏家电精彩摄影现代家居IT女人经验健康养生猎奇创业攻略教育学习历史时尚潮流最近更新涨知识