自訂圖片地圖

1.1 預期效果

內建地圖只適合展示地圖資訊，如果想要自訂一個商場樓層平面圖，該如何實現呢？

1.2 實現方法

管理者進入平台，在「管理系統>地圖配置」處製作自訂圖片，也就是製作地圖邊框。有了地圖邊框後，在儀表板中需要使用「自訂圖表」來實現自訂的地圖效果。

1.3 內網說明

自訂圖片配置需要聯通外網，或者給以下地圖 API 開啓白名單才能使用：

• webapi.amap.com

• vdata.amap.com

• restapi.amap.com

若使用者不能連結外網或開啓白名單，可以在 5.1.24 之前的版本中設定好的自訂圖片地圖的 json 檔案放置到正式工程的對應路徑裏（詳細可參見：自訂地圖資源），地理角色匹配 時就可直接用到此自訂地圖。

1）管理者進入平台，點選「管理系統>地圖配置>自訂圖片」，點選目錄右上角新增自訂圖片按鈕，將自訂圖片命名為2Fmarket，點選「確定」。如下圖所示：

2）選中建立的「2Fmarket」，點選右側「匯入圖片」按鈕，範例中匯入一張商場二樓平面圖。如下圖所示：

注1：匯入的圖片可自適應大小，也可以透過滾輪自由縮放大小。

注2：上傳圖片大小限制為 2M，也就是 Tomcat 預設 post 大小限制，使用者可自行設定為不限制圖片大小，設定方法參見文檔 WangEditor富正文元件插件 第四章的內容。

3）使用畫矩形工具將每個商家的區域圈出來，並設定區域名為對應商家的編號，所有商家都設定完畢後，點選右上角「儲存」按鈕即可。如下圖所示：

注：如果需要圈出的區域是不規則形狀，那麼可以使用「畫多邊形工具」進行描點。、

4）至此自訂圖片製作完成，生成的 JSON 檔案儲存在%FineBI_HOME%\webapps\webroot\WEB-INF\assets\map\image目錄下，如下圖所示：

注：JSON 檔案可以直接copy到其他工程下使用，地圖檔案生效方法請參見：地圖檔案更新 文檔的 2.2 節內容。

3.1 準備資料

1）管理者進入系統，點選「我的分析」，選中某個資料夾，點選「建立分析主題」。如下圖所示：

2）點選「本地Excel檔案>上傳資料」，上傳表資料。如下圖所示：

範例資料：商城自訂地圖.xlsx

3）上傳後，點選「確定」按鈕。如下圖所示：

4）點選右上角「編輯」按鈕。如下圖所示：

5）全選表欄位，在欄位設定中，將「商鋪名」欄位設定為「正文」，點選「儲存並更新」按鈕。如下圖所示：

6）點選「跳出並預覽」按鈕。如下圖所示：

3.2 建立組件

1）點選左下角「組件」按鈕。如下圖所示：

2）點選維度欄位商鋪名的下拉按鈕，選擇「地理角色（無）>自訂圖片」。如下圖所示：

3）自訂圖片選擇「2Fmarket」，店鋪名會自動跟製作地圖邊框時設定的區域名匹配。如下圖所示：

4）圖表型別選擇「自訂圖表」，將轉化為地理角色的 2 個維度欄位分別拖到橫軸和縱軸處，圖形屬性下的下拉框內選擇「填充地圖」。如下圖所示：

3.3 圖形屬性

3.3.1 設定標籤

將「商鋪名」欄位拖入到標籤處。如下圖所示：

3.3.2 設定顏色

點選「顏色」欄，設定顏色。如下圖所示：

3.3.3 設定提示

將品牌、商品欄位拖入到提示框中。如下圖所示：

注：更多設定請參見：圖表組件樣式、圖形屬性

3.4 效果預覽

3.4.1 PC 端

進入儀表板後，實際預覽效果如下圖所示：

3.4.2 行動端

App 及 HTML5 端效果如下圖所示：