自定義tileLayer圖層

1.1 問題描述

第三方地圖會限制訪問次數，當超出訪問限制時，圖層無法正常顯示，因此建議訪問量較大的地圖自定義 tileLayer 圖層。

1.2 解決思路

自定義 tileLayer 圖層推薦一個地圖供應廠商：Mapbox，在其官方網站生成圖層 URL 後拷貝到地圖自定義 tileLayer 下的 URL 編輯框中即可。

2.1 生成 URL 鏈接

1）打開 Mapbox官網 ，如果沒有賬号點擊下方按鈕注冊，已有賬号直接登錄即可。

2）登錄賬号後點擊右上方個人中心下拉按鈕，選擇Studio，如下圖所示：

3）新打開的頁面點擊New style創建一個自定義圖層，如下圖所示：

4）任意選擇一個圖層模板如 Outdoors，點擊Customize Outdoors，進入圖層編輯界面，如下圖所示：

5）圖層編輯界面左側可以設置圖層屬性，按照自己的需求進行設置即可，如下圖所示：

6）如下圖步驟生成第三方共享圖層鏈接，點擊複制按鈕将 URL 複制到剪貼板，如下圖所示：

2.2 報表設計

2.2.1 準備數據

新建決策報表，新建數據查詢數據集 ds1 ，SQL 語句爲：SELECT * FROM 地圖

2.2.2 插入圖表

将地圖拖拽到 body 中，地圖類型選擇區域地圖，如下圖所示：

2.2.3 綁定數據

綁定地圖數據，展示每個省份對應的銷售額，如下圖所示：

2.2.4 圖層設置

GIS 圖層選擇自定義 tileLayer，将 2.1 中生成的 URL 拷貝到編輯框中即可，如下圖所示：

2.3 效果預覽

2.3.1 PC 端

保存報表，點擊PC端預覽，自定義圖層效果如下圖所示：

2.3.2 移動端

同時支持 App 端和 H5 端預覽，效果如下圖所示：

已完成模板參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\Map\自定義TileLayer.frm

點擊下載模板：自定義TileLayer.frm

自定義圖層的 URL 中是不支持{r}參數的，如果有該參數那麽前端預覽時圖層不會顯示，如下圖所示：

解決該問題，把URL中的{r}參數删掉即可。