当前位置: 首页 > news >正文

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

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

必备产品:DataV数据可视化(如需查看请复制链接至PC端打开)

https://data.aliyun.com/visual/datav 


95a8b250d1c55d98f9fa68affa18c5ec7e0fc10a

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

1dfe2fdb606aeb98467d74737b7abee36c305167

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

1a800a9f9e75d0e2cff8cd93160e2027a81a771f

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

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

1125e6d1d7b975c346d523e5a0f68a156a169878

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

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

4f118fb616bf4bdf10c066e1bdcde619c3e0c242

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

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


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

下图:

fa5b49cca0024924419ee5923605a5579e5b3051

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

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

8ae57f1809da9c65629e91ac3882981af6abec40

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


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

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

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

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

fddf7f216d6a4748b1dc7dd05107c80dcc6083a1

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

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

b850b71b022b0d43dad1ca6227a1708d0a9cb5b1

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

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

[{
  "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旋转。

1401dd3719f5b046f4f640e2e3405768a214f46e


e57d43621e7f2bc44738bd3e76baab33e4e5357a


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

606f2b5d7607137b60073a8a18e296914728421e

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

ea02b15da2d607af953674573783771ab55a066c

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

03830b3f712544c2a11e2e4310c10770567ae24f


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

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

a2fc48da4415ca96e84bb1eb91f2d5e5ff5e6348

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

5368f8079c9b08c281400915a310de3690afb95f

ff68cce32aeab0328c840cf41859d15ae7a28beb

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

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

05c331a4e2aa58678f1672ef97080eb86633c071

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

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

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

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

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

2fae47e412b6e70abc347ca9daa5315feb8b944c

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

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

f82e74fed97a7661a643a063d559ba0dc589177d

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

cacac4d8a9296f57c7058cbeaf391d5b15775eec

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

再来回顾一下我的 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 字段(均价)来显示不同的大小和颜色了。

469182a5d518194ce1c20ba444ad56de6d4e0c58

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

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

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

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

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

怎么样?比看商圈报告方便吧。[偷笑]

94bf3b180c325109e1466e546d4813c00a570cbe

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

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

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

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

e7719eabbecd2207a66b4bafffdc45087fec28f8

轻轻松松把 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] 果然是西湖北岸泡吧,东岸喝咖啡,遍地撸串……

762f099f86309d7f8686b02eb237673cc7e5f383

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

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

700bf0e3d7626920f81cb3f385c34bcf61930ba0

最后我们看看什么是飞线,飞线一般用来表达两点之间的关系,比如某个人从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 标题 = "兰桂坊花园餐厅"
这样就得到了一条飞线。

Image%2016-8-17%20at%20%E4%B8%8B%E5%8D%8

0c482944dde7d76781369b164de80ebd4f552eb4

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

22554f8a1c65805684205b893cc30967844436e9

当然可以。

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

这里我用:

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

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

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

32abda0c4ac36cb4905e743a95a252fa2930ddd0

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

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

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

select
  ..., 
  someFile as id,
  ..., lat, lng, type
from xxx;
只要在前面的SQL中加上id即可。

那么怎么用呢?

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

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

3.jpg

566a52d1288779189a6817e24a844d90d692e41f

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

524b6b2a9a89d179f66b226325dd8bc7e9abb4e4

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

select
  ..., 
  someFile as id,
  标题 as name,
  concat("口味:",口味," 环境:",环境, " 服务:",服务,"<br/>",地址) as info,
  ..., lat, lng, type
from xxx;
那么最终大屏就会变成这样(当然要进预览页面才会有交互,FYI,龙井路上的这家绿茶我非常喜欢)

06af3d0c48ef7910868b6359733f3878a4903dc5

好了,今天就讲这么多。

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

2bb807d27ccea6b766d71a106c7c6f867493e044

head-spot.png?59229

相关文章:

  • 使用python+hadoop-streaming编写hadoop处理程序
  • php ci框架整合银盛支付
  • SQL Server编程(06)触发器
  • 关于写东西
  • 1164 统计数字
  • 大神的Blog挂了,从Bing快照里复制过来的备份
  • linux内核值shmmax问题
  • 一行神奇的javascript代码
  • Mybatis初体验
  • JSP_内置对象_out
  • ubuntu desktop解决系统启动后网络没有主动连接
  • 第6集_奇点和安迪吃饭2 吃野生鲫鱼
  • 老男孩教育-linux面试题-基础题1
  • Redis常用命令入门2:散列类型
  • mysql通过配置文件进行优化
  • 230. Kth Smallest Element in a BST
  • Brief introduction of how to 'Call, Apply and Bind'
  • Git 使用集
  • input实现文字超出省略号功能
  • Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
  • JavaScript类型识别
  • JDK 6和JDK 7中的substring()方法
  • k8s 面向应用开发者的基础命令
  • MySQL-事务管理(基础)
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • WinRAR存在严重的安全漏洞影响5亿用户
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 为什么要用IPython/Jupyter?
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 云大使推广中的常见热门问题
  • 追踪解析 FutureTask 源码
  • #NOIP 2014# day.2 T2 寻找道路
  • #多叉树深度遍历_结合深度学习的视频编码方法--帧内预测
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (ctrl.obj) : error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MDd_DynamicDebug”不匹配值“
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (强烈推荐)移动端音视频从零到上手(下)
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • (译)2019年前端性能优化清单 — 下篇
  • (转)视频码率,帧率和分辨率的联系与区别
  • .a文件和.so文件
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • .Net CoreRabbitMQ消息存储可靠机制
  • .net 开发怎么实现前后端分离_前后端分离:分离式开发和一体式发布
  • .NetCore Flurl.Http 升级到4.0后 https 无法建立SSL连接
  • .NET面试题解析(11)-SQL语言基础及数据库基本原理
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • .set 数据导入matlab,设置变量导入选项 - MATLAB setvaropts - MathWorks 中国
  • // an array of int
  • @JsonSerialize注解的使用