老板：

給我看看今年各個(gè)地區(qū)的銷售額都怎么樣了

你：

（遞上一張excel表格）老板請看

老板：

（皺眉）密密麻麻的字，要把我的眼睛看花嗎？？

你的競爭對手：

（呈上一份熱力圖）老板您看，這是我整理好的，省市區(qū)的銷售情況都可以查看哦

老板：

（點(diǎn)頭）嗯～不錯(cuò)，這才像話嘛，加薪！ ————————————————這里是分割線—————————————————————————————— 當(dāng)我們需要用

更直觀有效的形式

來展現(xiàn)各類數(shù)據(jù)信息時(shí)，

熱力圖

無疑是一種很好的方式。

例如老板想看到哪個(gè)地方的銷售額最可觀，通過熱力圖的顏色深淺便可以很直觀地發(fā)現(xiàn)。

是不是覺餓的不就熱力圖嘛，簡單！ 但假如老板再嚴(yán)謹(jǐn)一些，

大到需要大區(qū)的銷售額數(shù)值分布，小到市區(qū)級別時(shí)

，是不是你就開始頭疼了。 正巧了不是，本次教程就來

手把手教你，如何通過地圖下鉆，實(shí)現(xiàn)三級跳的區(qū)域熱力展示

（當(dāng)然如果你有相關(guān)數(shù)據(jù)配備，下鉆到你家都不是問題）比競爭對手提前學(xué)會(huì)，升職加薪不是夢！ 以下為簡單的下鉆預(yù)覽展示

教程開始之前，先帶大家進(jìn)入我們的

科普小課堂

，以便更好的理解下文的操作內(nèi)容~

大區(qū)：

中國按大區(qū)劃分為華北、東北、華東、華中、華南、西南、西北。下文中的大區(qū)均指的是以上七個(gè)板塊的統(tǒng)稱。

json：

是一種輕量級的數(shù)據(jù)交換格式。下文中的json文件均代指地圖數(shù)據(jù)文件。

adcode：

是由國家基礎(chǔ)地理信息中心定義的區(qū)域代碼，可以簡單地理解為每個(gè)區(qū)域的數(shù)字名字。

話不多說，上！教！程！

PART 1設(shè)置地圖組件

01添加組件-基礎(chǔ)平面地圖

首先在工作臺(tái)中點(diǎn)擊“組件”-“地圖”-“基礎(chǔ)平面地圖”。

02上傳中國地圖json文件

上傳特定的中國地圖json文件（包含大區(qū)） 先來給大家看看系統(tǒng)默認(rèn)數(shù)據(jù)和含有大區(qū)的中國地圖數(shù)據(jù)有什么不同 如下是

系統(tǒng)默認(rèn)文件

，地圖僅僅展現(xiàn)的是每個(gè)省份的輪廓。

如下是自定義上傳的

中國（帶有大區(qū)）json文件

，所以能呈現(xiàn)出大區(qū)的輪廓。

（覺得原先底圖太丑的可以直接把子組件-地圖底圖刪掉，在組件-輔助-圖片中選擇好看的圖片上傳成為背景圖即可，這邊不多贅述）

PART2 制作大區(qū)熱力圖

01添加組件-區(qū)域熱力

先來制作

大區(qū)的熱力圖

，選中地圖圖層，添加

“子組件”-“聚合熱力”

，修改組件名稱為“區(qū)域熱力-大區(qū)”。

Q:地圖好像不是大區(qū)的的分布呀？ A:因?yàn)檫@個(gè)組件中的默認(rèn)配置和數(shù)據(jù)是省級別的，咱們依照自己需要的數(shù)據(jù)做個(gè)修改就好了~（咱們繼續(xù)往下看）

02

02上傳大區(qū)json文件

進(jìn)入“熱力大區(qū)”子組件，上傳大區(qū)json文件，這樣就已經(jīng)能夠看到咱們大區(qū)的輪廓了。

03上傳數(shù)據(jù)

最后，在“數(shù)據(jù)”中配置

大區(qū)的數(shù)據(jù)

，將字段對應(yīng)上，即可呈現(xiàn)出熱力效果。 （已經(jīng)成功了一小步了！加油?。。?

PART3 制作省份熱力圖

01添加組件-區(qū)域熱力

同上步驟，添加“區(qū)域熱力-省份”，此時(shí)

無需上傳地圖json文件

，因?yàn)樵蹅?/p>

EasyV特別貼心地內(nèi)置好了~

02接入數(shù)據(jù)

接入自己的數(shù)據(jù)庫或者數(shù)據(jù)文檔即可~（以下為測試數(shù)據(jù)） ? 注意：數(shù)據(jù)中必須包括

“parent”

，即該省份屬于某一大區(qū)。例如上海屬于華東，那么上海數(shù)組中的parent字段等于華東。 這樣在后續(xù)雙擊某個(gè)大區(qū)時(shí)，系統(tǒng)才能精準(zhǔn)識(shí)別該大區(qū)下有幾個(gè)“孩子”。

03設(shè)置過濾器

這一步的作用是為了點(diǎn)擊大區(qū)的時(shí)候

只看到屬于它的省份熱力值

，呼應(yīng)上文的操作~

04設(shè)置層級

如果配置完成后，省區(qū)域的熱力圖層蓋住了大區(qū)熱力，可以

在基礎(chǔ)配置中，修改層級

。 ps：層級數(shù)字越大，圖層在最頂端。假設(shè)如果有3個(gè)層級，大區(qū)的層級可以定為2，省層級為1，市層級為0。

05初步驗(yàn)證

把大區(qū)熱力右邊的小眼睛蓋上后，可以看到省份的區(qū)域熱力也完美呈現(xiàn)出來了~

為了從大區(qū)下鉆到省的時(shí)候，可以只出現(xiàn)下鉆的某個(gè)省，周圍的熱力值隱去，因此需要配置交互來實(shí)現(xiàn)這一功能。

PART4

01添加自定義事件

回到基礎(chǔ)平面地圖（即母組件設(shè)置欄），設(shè)置交互信息。 事件1：未下鉆時(shí)，“區(qū)域熱力-大區(qū)”顯示（動(dòng)作1）;“區(qū)域熱力-省份”隱藏（動(dòng)作2）

事件2：下鉆時(shí)，“區(qū)域熱力-大區(qū)”隱藏”（動(dòng)作1）；“區(qū)域熱力-省份”顯示（動(dòng)作2）

注意：因?yàn)榛A(chǔ)平面地圖中上傳的json文件（即地圖經(jīng)緯度文件）是"中國.json"，因此代碼編輯如上，如果地圖文件名稱是自定義的，記得自己對應(yīng)的修改哈~~

02設(shè)置切換回調(diào)

在切換回調(diào)中添加變量名adcode，以接收針對雙擊下鉆時(shí)發(fā)送的指令。

03預(yù)覽

這樣就可以看到咱們的制作的大屏就完成下鉆啦~

如果只需要下鉆到

份

即可，那么到此你就

已經(jīng)成功了！！

有需要

下鉆到市區(qū)

的小伙伴可以接著往下看~

PART5

01添加組件-區(qū)域熱力

同上步驟，添加“區(qū)域熱力-市級”，上傳市級地圖數(shù)據(jù)（本教程以浙江省為例）

02接入數(shù)據(jù)

此處以靜態(tài)數(shù)據(jù)為例（也就是我捏造的數(shù)據(jù)），將兩個(gè)字段對應(yīng)上即可。

03撒花完結(jié)

來看一看預(yù)覽效果~

點(diǎn)擊返回上級還可以回到之前的圖層查看熱力值。

組件配置明細(xì)如下所示

配置過程中出現(xiàn)問題，可以通過下列的導(dǎo)圖查看自己是哪一部分沒有配置上~

易知微官網(wǎng)還有更多精美的地圖下鉆熱力圖素材模板，總會(huì)有老板喜歡的一款～

以上內(nèi)容來源于易知微官網(wǎng) 更多精美模板和案例（包含智慧水利、智慧城市、智慧工廠、智慧教育等），還有更多可視化大屏保姆級制作教程，前往易知微官網(wǎng)查看詳情： https://easyv.cloud/?t=bilibili 數(shù)字孿生可視化交流群：https://work.weixin.qq.com/gm/9ad22c40c9cd21859e8aa5022f6fc3cb（企業(yè)微信） 免費(fèi)試用期間：運(yùn)營、產(chǎn)品、設(shè)計(jì)、技術(shù)人員專業(yè)一對一拉群指導(dǎo)，解答疑惑。