Leaflet在線地圖進階寶典——json素材操縱與圖層面板控制

01-24

這篇教程憋了很久，其實算是3個月前leaflet在線地圖系列的進階篇，但是因為當時對於leaflet地圖的數據源結構理解有限，技能勉強操控shp數據源，對於json數據源所知甚少，一直拖了這麼久才更新。

隨著近期在json數據結構的理解不斷加深，對於list結構和向量化運算的掌握也多有提高，這才能熟練的在leaflet系統中操控json數據。

本篇主要分為兩大部分：

如何自如的操縱json數據來打造leaflet所能識別的數據源和style屬性；
如何操控leaflet控制台版面中的地圖圖層和數據圖層。

想要很好的理解本文，你需先對leaflet系統基礎語法有所掌握（其實可視化的圖層語法都大同小異，leaflet屬於JavaScript語言打造的在線地圖庫，同D3、plotly、Rcharts以及Highcharts等介面的語法差別不大）。

但如果你在看本文之前已經看過我的前期四篇leaflet入門篇：

動態地理信息可視化——leaflet在線地圖簡介

動態地理信息可視化——散點地圖系列

動態地理信息可視化——leaflet構造路徑圖

動態地理信息可視化——leaflet填充地圖

那麼本文理解起來就容易多了，僅僅是溫故知新罷了！

當然如果你學有餘力的話，你也可以順便把百度的Echarts系統地圖介面也學習一下：

R語言可視化——REmap動態地圖

R語言可視化——REmap(路徑圖)

R語言可視化——REmapC(填充地圖)

R語言可視化——REmapH(中心熱度圖)

如果你能熟練掌握以上兩套在線地圖語法，那麼製作此類可視化項目至少在技術角度上來說已經沒有任何門檻。

以下是本文的主要內容：

json地圖數據結構和變數操控：

library(jsonlite)library(leaflet)library(dplyr)library(geojsonio)library(rgdal)library(sf)library(ggplot2)library(maptools)library(plyr)library(htmltools)

options(stringsAsFactors=FALSE,warn=FALSE) #這樣的全局預設可以為你省卻很多麻煩，強烈建議setwd("D:/R/mapdatanew/")###1url<-"https://raw.githubusercontent.com/ljtyduyu/DataWarehouse/master/Mapdata/City/110100.json"

###最近把自己所有的關於地圖可視化的數據傳到了個人Github上，這樣無論是大家以後調用數據還是自己平時練習都方便多了！

以下數據導入json原生數據格式的三種方式：（2,3兩種是沒啥區別的，但是simplifyVector=FALSE參數設定與否則至關重要，他決定著輸入的json數據是經過平整的向量化數據還是原生的list數據，這裡的leaflet需要原生格式的json數據）

geojson1<-fromJSON(url) #在同一層級對象長度一致，便會被自動視作數據框。geojson2<-fromJSON(url,simplifyVector=FALSE) #不強轉化為數據框。geojson3<-readLines(url,warn=FALSE,encoding="UTF-8")%>%paste(collapse=" ")%>%fromJSON(simplifyVector=FALSE)

設置隨機中非常必要，否則容易導致每次的效果都不一樣：

set.seed(1234)#向list對象中添加數據（隨機數據）geojson3$features<-lapply(geojson3$features,function(feat){feat$properties$scale<-runif(1,0,10)feat})

#從list對象中讀取數據(主要讀取我們可做更改與擴展的行政區劃列表信息)mydata<-ldply(geojson3$features,function(feat){ name<-feat$properties$nameid<- feat$properties$idscale<-as.numeric(feat$properties$scale)mydata<-data.frame(name,id,scale)})

# Default styles for all features #it has higher precedence compare with the style in a function of GeoJSONgeojson3$stylex=list(weight=1,color="#555555",opacity=1,fillOpacity=0.8)

# Color by scale using quantilespal<-colorQuantile("Greens",mydata$scale)# Add a properties$style list to each featuregeojson3$features <- lapply(geojson3$features, function(feat) { feat$properties$style<-list( fillColor=pal(feat$properties$scale) ) feat})

關於屬性設置的三個優先順序：

按照由高到低的順序排列為：

feature-specific styles #（也就是設置在 simple featrue的style）
the top-level style object #（設置在features中的style）
style-related arguments passed to the function #（設置在GeoJSON內的各種參數）

#這是通過增加地圖圖層來進行圖層控制的簡單案例：leaflet()%>%addTiles(group ="OSM (default)")%>%setView(lng=116.435889,lat=39.932642,zoom=8)%>%addGeoJSON(geojson3,group="GeoJSON")%>%addProviderTiles(providers$CartoDB.Positron,group="CartoDB")%>%addProviderTiles(providers$Stamen.TonerLines,options=providerTileOptions(opacity=0.35),group="TonerLines")%>%addProviderTiles(providers$Stamen.TonerLabels,group="TonerLabels")%>%addLayersControl( baseGroups = c("OSM (default)", "CartoDB", "TonerLines","TonerLabels"), overlayGroups = c("GeoJSON"), options=layersControlOptions(collapsed = FALSE) )

以下這段代碼是之前leaflet系列教程的線圖篇裡面的案例，這裡剛好應用一下：

data<-read.table("D:/R/File/subwayline.txt",header=TRUE,stringsAsFactors = FALSE)data$size<-runif(47,10,25)data$Type<-as.factor(data$Type)data1<-filter(data,Type=="NO1")data2<-filter(data,Type=="NO5")pal <- colorFactor(topo.colors(2),data$Type)leaflet()%>%addTiles()%>%addPolylines(data=data1,~lon,~lat,color="blue")%>%addPolylines(data=data2,~lon,~lat,color="green")%>%addCircleMarkers(data=data,~lon, ~lat,popup = ~address,radius=~size,group=~Type)

這是一個高度綜合的案例，包含底圖圖層的多分類控制；數據圖層的多分類控制以及點線面三種數據圖層的綜合運用。

leaflet()%>%addTiles(group ="OSM (default)")%>%setView(lng=116.435889,lat=39.932642,zoom=8)%>%addGeoJSON(geojson3,group="GeoJSON")%>%addProviderTiles(providers$CartoDB.Positron,group="CartoDB")%>%addProviderTiles(providers$Stamen.TonerLines,options=providerTileOptions(opacity=0.35),group="TonerLines")%>%addProviderTiles(providers$Stamen.TonerLabels,group="TonerLabels")%>%addPolylines(data=data1,~lon,~lat,color="red",group="line1")%>%addPolylines(data=data2,~lon,~lat,color="orange",group="line2")%>%addCircleMarkers(data=data,~lon, ~lat,popup = ~address,radius=~size,group="address",color = "#1843F9")%>%addLayersControl( baseGroups = c("OSM (default)", "CartoDB", "TonerLines","TonerLabels"), overlayGroups = c("GeoJSON","line1","line2","address"), options=layersControlOptions(collapsed = FALSE) )

動態視頻效果來一波！

Leaflet在線地圖進階寶典——json素材操縱與圖層面板控制

聯繫方式：

wechat：ljty1991

Mail:578708965@qq.com

個人公眾號：數據小魔方（datamofang）

團隊公眾號：EasyCharts

qq交流群：[魔方學院]553270834