在 ECharts GL 中繪製三維地圖

ECharts 前段時間發佈了超亮眼的 GL，相對於以前已經圈粉無數的 ECharst-X 而言，ECharst GL更是帥到爆，不管是性能、顏值、類型都有了巨大的飛躍。可是對於小編這樣的設計師來講是否是更易上手呢？答案是確定的，咱們除了可以根據數據畫出諸如三維地圖等三維的可視化圖以外，只須要在項目中加入幾個簡單的配置項，就能配製出想要的風格的高質量畫面效果。

本文源地址：echarts.baidu.com/blog/2017/0…

這篇教程就但願經過在 Gallery裏繪製一個有豐富的光效、陰影的寫實風格的三維地圖的例子，簡單介紹一些ECharts GL與畫質相關的配置項，最終效果見 gallery.echartsjs.com/editor.html…
（下圖爲最後的效果）。涉及到過高深專業的算法、代碼、什麼什麼的小設計師我實在是不會，因此這個僅僅能當 GL 入門級教程使用哦～

繪製一個基礎的三維地圖

首先咱們在 Gallery 中用 ECharts GL 畫一個基礎的三維地圖。注意由於 GL 是 ECharts 的一個擴展，因此咱們須要在 Gallery 中額外引入 GL 的腳本文件。 「引入文件」只須要在 Gallery中新建做品，而後在「腳本」的配置中加入這行地址就好了。

echarts.baidu.com/resource/ec…

若是要繪製世界地圖的話還須要引入上面「經常使用腳本」的世界地圖文件。

作好準備工做後咱們就能夠開始畫一個三維的世界地圖了，GL 中畫三維地圖的配置項跟畫普通的二維地圖同樣，只是系列名稱從原來的map改爲map3D。

咱們先用下面的最基礎配置項，基於引入的腳本，生成一個最基礎的三維地圖系列。

option = {
series: [{
type: 'map3D',
map: 'world'
}]
};
是否是很簡單，固然畫出來的效果也是很是基礎和簡陋的。

接下來就咱們須要作的就是一步一步的添加光照、陰影、後期的配置項把這個三維地圖畫得更漂亮。

添加更豐富的燈光

GL 中大部分組件都支持燈光的配置，這些燈光會影響到組件中的全部圖形，燈光的配置項須要統一在組件light屬性下設置。

light: {
main: {
intensity: 1
},
ambient: {
intensity: 0
}
}
一般狀況下組件中默認會有一個主光源main和一個全局的環境光ambient。主光源起到了主要的照明做用，可讓咱們剛纔畫出來的三維地圖產生基礎的明暗對比，從而使圖形產生真實的立體感。全局的環境光能夠爲整個場景提供全局照亮和統一材質的效果。（添加光照效果以下圖）

咱們能夠經過intensity屬性設置不一樣光源的強度。例如在上面的代碼中咱們將主光源的強度設成2，環境光源的強度設成0後能夠獲得更增強烈的明暗對比。

默認的環境光只是單純的對全部圖形都加上一個固定的亮度，因此會顯得很平淡，若是把主光源去掉（intensity設爲0）的話，整個地圖場景會變成灰色。因此爲了更豐富的光照效果，咱們可使用 GL 提供的更爲強大的ambientCubemap做爲環境光源。

ambientCubemap是指使用一張全景貼圖做爲環境光源。通常全景的環境光貼圖大概是下面這樣。

你們使用手機的全景模式中就能夠拍出相似的全景照片。不太小編建議去尋找專業的 HDR 格式的全景圖資源。這裏推薦一個有很多免費的HDR全景圖資源的網站 www.hdrlabs.com/sibl/archiv…

找到合適的全景圖片後，咱們能夠在 Gallery 的導入數據中上傳該圖片。

獲得在 Gallery 上該圖片地址連接後插入到ambientCubemap的texture屬性中。

light: {
main: {
intensity: 1
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '/asset/get/s/data-1497251035660-HkVJTnsMW.hdr'
}
}
設置了texture屬性後 GL 就會自動啓用環境光貼圖做爲環境光源。

由於全景貼圖的每一個像素都會被計算到光照裏，因此相比普通的環境光，使用環境光貼圖會讓整個光照會顯得更真實和豐富。

爲了獲得更真實的環境光效果，注意此處建議使用.hdr格式的圖片，由於 HDR 也就是高動態範圍圖像，它比其餘格式的圖像有更大亮度的數據存儲。對比一下同一張圖片HDR和PNG格式照亮的不一樣效果。

添加陰影

有光的地方就會有陰影，陰影給了光照更多的層次，失去了陰影的光照是沒有靈魂的，是平淡乏味的。

在 GL 中能夠簡單的加上shadow: true爲主光源添加陰影。同時爲了讓三維地圖有一種放在地面上的立體模型的感受，咱們再顯示一個地面groundPlane。

light: {
main: {
intensity: 1,
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '/asset/get/s/data-1491896094618-H1DmP-5px.hdr'
}
},
groundPlane: {
show: true
}

經過陰影還能夠更容易得感覺到光照的方向，咱們能夠經過設置主光源alpha、beta兩個屬性設置不一樣的光照角度，來查看陰影的變化。

main: {
intensity: 1,
shadow: true,
alpha: 150,
beta: 70
}

這樣就能夠實現以前設計圈很是流行的一種長陰影的風格。

更豐富的顏色

到這裏咱們獲得的效果跟最初那個簡陋的畫面已是天壤之別了，小編做爲一個設計師是很鍾情於白模的效果的，可是若是你手裏有一份數據的話更是錦上添花。 數據的上傳和轉換能夠經過echarts提供的表格數據轉換工具實現， echarts.baidu.com/spreadsheet… 數據部份內容不在此多述。若是暫時沒有現成數據，能夠直接先複製教程實例中的數據，見左側代碼區域var regionData = [{……}];內的所有內容，直接複製粘貼便可進行以後操做。

將這份數據導入並寫入配置項裏，

接下來，咱們可使用 ECharts 中視覺映射「visualMap」組件將地圖中的每塊區域賦予不一樣的顏色。

在 ECharts GL 中使用 visualMap 和在ECharts中並無任何的不一樣：

visualMap: {
show: false,
min: 0,
max: 15,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
}
就是這樣子每一個國家根據不一樣數據就呈現出不一樣的顏色啦。

後期處理

看到後期可能你們第一個想到的就是使用 PS 調色，小編此次主要用到的確實是調色。但其實GL 中除了調色以外，還有例如景深 、描邊等諸多的後期效果能讓整個畫面呈現出你須要的效果，你們以後能夠大膽的嘗試。

不知道你們是否能感覺到其實此時獲得的圖片總體明度偏暗，色相偏藍。就如咱們在拍完照片後發現色調和曝光不理想須要再次調整圖片同樣，咱們也須要對這張的畫面進行後期處理和調色。

後期處理的配置項都是在組件的postEffect下。首先能夠經過 enable 屬性開啓。

postEffect: {
enable: true
}
開啓後 GL 會自動對整個畫面調整曝光到合適的顏色。

固然若是這個畫面並不能讓咱們滿意的話，咱們還能夠經過postEffect下的colorCorrection配置項去手動的調整顏色。colorCorrection下有常見的曝光exposure、亮度brightness、對比度contrast和飽和度saturation選項。

可是此次小編要教你們使用這裏面更強大的顏色查找表功能lookupTexture。這個功能可讓咱們在 PS 等本身用着順手的圖像處理軟件裏處理好圖片以後再到 GL 裏復現咱們在 PS 裏調整的顏色曲線。

小編給你們提供了一張初始的顏色查找表，你們把下面這張查找表的圖片下載下來後和你的做品截圖一塊兒放入 Photoshop 中（能夠把做品截圖拖入查找表圖層的上方，注意須要保持查找表大小不變，做品截圖是爲了讓咱們直觀的預覽調整的效果，調到滿意以後，刪除做品圖層，只保存查找表，以後在GL中載入查找表，查找表的顏色映射會直接在GL中復現）。

點擊左下角建立新的填充或調整工具來選擇本身須要調整的配置項，此時兩個圖層是能夠同時調整的，這裏能夠自由調整各項參數來實現本身想要的效果。我在此使用的是顏色查找下自帶的Candlelight.cube將圖片調整成了一種蠟燭光照的復古風格，又調整了亮度和對比度使其更清晰。

調整完成以後，隱藏做品截圖的圖層，只需保存顏色查找表（以下圖）

將該圖在 Gallery 內上傳數據，獲得在 Gallery 上該圖片地址連接後插入到colorCorrection的 lookupTexture中便可。

到此，在 ECharts GL 中配置一個三維地圖的步驟就完成啦，還想解鎖更多 GL 技能的話， 能夠直接去 ECharts 官網查看 GL 超多酷炫的實例，或者去查看GL的配置項手冊 echarts.baidu.com/option-gl.h… 盡情的嘗試吧～

總結

本文咱們介紹瞭如何在 ECharts GL 中配置出一張好看的寫實風格三維地圖。小編要偷偷地告訴你，用 ECharts GL 生成的效果圖你還能夠直接用來作圖片素材哦，若是你還在爲 PPT 或者本身的設計做品找不到合適的配圖素材發愁的話，快來試試直接在 Gallery 裏用 ECharts GL 直接生成一張吧。