Jul 9, 2015 - remapB-Echarts与百度地图

Bmap--Echarts与百度地图

REmap是一个基于Echarts http://echarts.baidu.com 的一个R包.主要的目的是为广大数据玩家提供一个简便的,可交互的地图数据可视化工具.目前托管在github, https://github.com/lchiffon/REmap

remapB

remapB是用于创建一个以百度地图为底图的recharts效果,有以下特点:

支持滚轮缩放,拖拽地图
详细的地图效果
可视化主要以标线与标点的形式做出

具体的地图是有多详细呢?打开百度地图App,恩,知道了吧,就是这么详细.

remapB的使用

函数的调用形式为:

remapB(center = c(104.114129,37.550339),
       zoom = 5,
       color = "Bright",
       title = "",
       subtitle = "",
       # mark Line & point
       markLineData = NA,
       markPointData = NA,
       markLineTheme = markLineControl(),
       markPointTheme = markPointControl(),
       geoData = NA)

先说除去markline和markpoint的参数:

center: 地图的中心(经纬度坐标),可以从get_city_coord获得
zoom: 地图缩放尺寸,越小地图越大,(5代表国家级的地图,15代表市级的地图)
color: 地图的颜色风格,目前仅开放了“Bright”和“Blue”,两种,细节调整参见百度地图API来修改html的源代码

先来看下没有标点和标线的Bmap效果:

remapB()

可以用remapB来查看某个城市的地图

remapB(get_city_coord("北京"),zoom = 12)

换一个theme:

remapB(color = "Blue")

简单演示下remapB中使用markLine和markPoint的效果:

remapB(title = "Bmap 迁徙图示例",
        color = "Blue",
        markLineData = demoC,
        markPointData = demoC[,2])

Jun 3, 2015 - 标线--Mark Line

Untitled

markLine

markLine是Echarts中进行标线的工具.通过标线(直线,曲线),可以完成很多有意思的可视化

先说一下markLine相关的参数,这些参数可以在remapC或者remapB中调用:

markLineData 标线使用的数据,第一列为出发地,第二列为目的地
markLineTheme 控制标线颜色,形状等,由markLineControl来控制
geoData 标中各个点的经纬度坐标,如果没有,会使用BaiduAPI自动查找

一个简单的示例:

remapB(title = "Remap:  百度迁徙模拟",
       color = "Blue",
       markLineData = demoC)

markLineTheme

markLineTheme控制了标线的风格,使用markLineControl来调用,这里列出主要的参数:

markLineControl(symbolSize = c(2,4),
      smoothness = 0.2,
      effect = T,
      lineWidth = 1,
      lineType = 'solid',
      color = "Random")

SymbolSize:
- 形状的大小,标线默认是一段无形状,一段箭头,如果不想要箭头可以使用symbolSize = c(0,0)
smoothness:
- 曲线的弯曲度,取0标线会退化为直线
effect:
- 炫光特效,标线较多的时候建议关闭
lineWidth:
- 标线的宽度
lineType:
- 标线的样式: ’solid’实线’dotted’点线或者 ’dashed’虚线
color:
- 颜色,默认为随机颜色,设置一个颜色会取为固定颜色
- 此外对markLineData下设置color变量会覆盖该颜色

remapB(title = "Remap:  百度迁徙模拟",
       color = "Blue",
       markLineData = demoC,
       markLineTheme = markLineControl(symbolSize = c(0,0),
                                       lineWidth = 10,
                                       lineType = 'dashed'))

设置额外的颜色:

demoC$color = sample(c("red","blue"),10,replace = T)

remapB(title = "Remap:  百度迁徙模拟",
       color = "Blue",
       markLineData = demoC,
       markLineTheme = markLineControl(symbolSize = c(0,0),
                                       lineWidth = 10,
                                       effect = F,
                                       lineType = 'dashed'))

geoData

mapC和mapB中,都会有geoData这个变量,用以储存markLine和markPoint的地理位置信息.具体的格式与get_city_coord返回相同:

第一列lon
第二列lat
第三列地理名称

get_geo_position(c("Beijing","Shanghai","Guangzhou"))

       lon      lat      city
1 116.4232 39.91528   Beijing
2 121.5221 31.30477  Shanghai
3 113.2684 23.12980 Guangzhou

下面是一个例子,通过这个例子可以看到markLine的使用方式

Example:地铁线路可视化

这里,我们使用REmap中自带的subway来进行演示,是上海地铁一号线的线路信息,其中subway[[1]]为各个点的经纬度坐标,subway[[2]]为各个点的连线方式.(数据来源于百度API)

各个点的经纬度坐标

head(subway[[1]])

               V1              V2              name
1 121.43102542826 31.398676380258 yihaoxian Point 1
2 121.43132186908 31.397705460498 yihaoxian Point 2
3 121.43154644546 31.396665178073 yihaoxian Point 3
4 121.43339695481 31.391602304084 yihaoxian Point 4
5 121.43433119254 31.387733681833 yihaoxian Point 5
6 121.43766390598 31.374986126392 yihaoxian Point 6

各个点的连线方式

head(subway[[2]])

             origin       destination
1 yihaoxian Point 1 yihaoxian Point 2
2 yihaoxian Point 2 yihaoxian Point 3
3 yihaoxian Point 3 yihaoxian Point 4
4 yihaoxian Point 4 yihaoxian Point 5
5 yihaoxian Point 5 yihaoxian Point 6
6 yihaoxian Point 6 yihaoxian Point 7

remapB(center = get_city_coord("上海"),
       zoom = 13,
       title = "Remap:  上海地铁一号线",
       color = "Blue",
       markLineData = subway[[2]],
       markLineTheme = markLineControl(smoothness = 0,
                                       effect = T,
                                       symbolSize = c(0,0)),
       geoData = subway[[1]])

Jun 2, 2015 - 标点--Mark Point

Untitled

markPoint

markPoint是Echarts中进行标点的工具.通过不同形状的点(箭头,星,圆或者自定义的图片)来完成点的标注

与markLine类似,markPoint相关的参数,可以在remapC或者remapB中调用:

markPointData 标点使用的数据,可以是一个向量,如果是数据框就仅使用第一列.
markPointTheme 控制标点颜色,形状等,由markPointControl来控制
geoData 标中各个点的经纬度坐标,如果没有,会使用BaiduAPI自动查找

一个简单的示例:

remapB(title = "Remap:  百度迁徙模拟",
       color = "Blue",
       markPointData = demoC[,2])

markPointTheme

markPointTheme控制了标线的风格,使用markPointControl来调用,这里列出主要的参数:

markPointControl(symbol = 'emptyCircle',
                  symbolSize = "Random",
                  effect = T,
                  effectType = 'scale',
                  color = "Random")

symbol:
- ‘circle’,‘emptyCircle’,圆,空心圆
- ‘rectangle’,‘emptyRectangle’,方块,空心方块
- ‘triangle’,‘emptyTriangle’,三角,空心三角
- ‘diamond’,‘emptyDiamond’,钻石,空心钻石
- ‘heart’心形,’droplet’,水滴
- ‘pin’,POI标注,’arrow’箭头, ’star’五角星
- 或者使用’image://http://….’来引用一个图片
- 此外对markLineData下设置symbol变量会覆盖该颜色
symbolSize:
- 标点的大小
effect:
- 炫光特效,标线较多的时候建议关闭
effectType:
- 炫光特效的方式,’scale’放大,或者’bounce’跳动
color:
- 颜色,默认为随机颜色,设置一个颜色会取为固定颜色
- 此外对markLineData下设置color变量会覆盖该颜色

remapB(title = "Remap:  markPoint示例",
       color = "Blue",
       markPointData = demoC[,2],
       markPointTheme = markPointControl(symbol = 
      "image://http://chiffon.gitcafe.io/assets/images/df_logo.jpg",
                                        symbolSize = 15,
                                       effect = F))

geoData

mapC和mapB中,都会有geoData这个变量,用以储存markLine和markPoint的地理位置信息.具体的格式与get_city_coord返回相同:

第一列lon
第二列lat
第三列地理名称

get_geo_position(c("Beijing","Shanghai","Guangzhou"))

       lon      lat      city
1 116.4232 39.91528   Beijing
2 121.5221 31.30477  Shanghai
3 113.2684 23.12980 Guangzhou

下面的例子,结合了上一节的地铁信息,增加了一些POI的店铺信息

Example:地铁线路可视化

这里,我们使用REmap中自带的geoData来进行演示,数据是是上海自助餐与火锅的POI位置信息,一共30条(数据来源于百度API)

数据是如下的样子:

121.4802 31.24210 鑫海汇自助烤肉 
121.4447 31.19689 五月罗马海鲜自助餐厅(徐家汇店) 
121.3307 31.24701 多伦多风情自助餐厅(万达广场店) 
121.4622 31.23414 金钱豹自助餐 中信泰富店 
121.5249 31.23544 五月罗马海鲜自助餐厅

绘制点图

#前20个标注为天蓝色,后10个标注为红色
pointData = data.frame(geoData$name,
                       color = c(rep("skyblue",20),
                                 rep("red",10)))



remapB(get_city_coord("上海"),
       zoom = 13,
       color = "Blue",
       title = "上海美食",
       markPointData = pointData,
       markPointTheme = markPointControl(symbol = 'pin',
                                         symbolSize = 5,
                                         effect = F),
       geoData = geoData)

当然在一个地图中可以混合标点与标线的信息

names(geoData) = names(subway[[1]])
remapB(get_city_coord("上海"),
       zoom = 13,
       color = "Blue",
       title = "Remap:  MarkPoint&MarkLine",
       markPointData = pointData,
       markPointTheme = markPointControl(symbol = 'pin',
                                         symbolSize = 5,
                                         effect = F),
       markLineData = subway[[2]],
       markLineTheme = markLineControl(symbolSize = c(0,0),
                                       smoothness = 0),
       geoData = rbind(geoData,subway[[1]]))

Newer Page: 2 of 2

REmap Tutorial

Links

Jul 9, 2015 - remapB-Echarts与百度地图

remapB

remapB的使用

Jun 3, 2015 - 标线--Mark Line

markLine

markLineTheme

geoData

Example:地铁线路可视化

Jun 2, 2015 - 标点--Mark Point

markPoint

markPointTheme

geoData

Example:地铁线路可视化

绘制点图