1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 |
|---|---|
| 11.0.16 | V1.15.1 |
1.2 應用場景
普通地圖提供了縮放等級API，透過 JavaScript 點選事件，預覽時可點選標題選擇縮放層級實現地圖的縮減或放大。效果如下圖所示：
1.3 實現思路
可透過APIduchamp.getWidgetByName("區域地圖1_頁面1").setMapZoom({zoomLevel: 5, viewCenter: [110, 40]});設定地圖的中心點和對應的縮放等級。
zoomLevel：縮放等級，值區間一般在 0-18。數值越大，層級越高，地圖顯示越細緻，顯示的經緯度範圍越小。
viewCenter：中心點，[經度，緯度]。
注1：縮放等級的區間與各個圖層支援的縮放等級一致。比如圖層為高德地圖時，縮放區間為 [3,18]；圖層為無時，縮放區間為 [0,18]。
注2：該API不支援擴展圖表。
2. 區域地圖範例
2.1 建立範本
點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂範本名稱和尺寸。如下圖所示：
2.2 準備資料
在報表左下方建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 地圖 where 省份='臺灣省' 。如下圖所示：
2.3 設計地圖
2.3.1 新增圖表
點選組件區「圖表」按鈕，選擇「地圖類>區域地圖」。如下圖所示：
2.3.2 設定地圖邊框和資料
選中區域地圖，點選右側屬性面板「內容>型別」，設定地圖邊框為「臺灣省」，GIS 圖層為「標準>mapbox」，縮放等級設定為7，中心點設定為[121,23]。
點選「資料」，綁定地圖資料集。如下圖所示：
2.4 設定點選事件
2.4.1 新增標題
點選組件區「其他」按钮，选择「标题」，共新增四個標題組件。如下圖所示：
分別將其內容設定為 4,[121,23]、5,[121,23]、6,[121,23]、自動 。
2.4.2 給標題新增點選事件
選中標題 4,[121,23]，點選右側屬性面板「交互>新增點選事件」，新增一個 JavaScript 型別的點選事件，輸入 JavaScript 代碼如下：
具體步驟如下圖所示：
其餘標題的 JavaScript 代碼分別如下：
5,[121,23]：將縮放等級修改為 5
6,[121,23]：將縮放等級修改為 6
自動：將縮放等級修改為 "自動" ，並刪除 viewCenter
2.5 效果預覽
2.5.1 PC 端
點選範本右上角「儲存」按鈕，再點選「預覽」，預覽後的效果如 1.2節所示。
2.5.2 行動端
預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
3. 鑽取地圖範例
3.1 建立頁面
點選畫布下方「點選建立頁面」，建立 頁面2 。如下圖所示：
3.2 準備資料
與 2.2 節一致，建立頁面後，在報表左下方建立資料庫查詢 ds2，SQL 查詢語句為：SELECT * FROM 地圖 where pid='江蘇省' 。
3.3 設計地圖
3.3.1 新增圖表
點選組件區「圖表」按鈕，選擇「地圖類>鑽取區域地圖」。如下圖所示：
3.3.2 設定地圖邊框和資料
選中鑽取區域地圖，點選右側屬性面板「內容>型別」，設定地圖邊框為「中國」，GIS 圖層為「標準>標準」，縮放等級和中心點均保持預設「自動」。
點選「資料>資料」，選擇「各層級分別指定」，第 1 層區域名選擇「pid」，第 2 層區域名選擇「省份」。如下圖所示：
3.4 設定點選事件
3.4.1 新增標題組件
點選組件區「文字」按鈕，選擇「標題」，共新增兩個標題組件，別將標題重命名為5、自動。步驟如 2.4.1 一致。
3.4.2 給標題新增點選事件
選中標題 5，點選右側屬性面板「交互>新增點選事件」，新增一個 JavaScript 型別的點選事件，輸入 JavaScript 代碼如下：
5：將縮放等級修改為 5
具體操作步驟如下：
其餘的標題的代碼如下：
自動：將縮放等級修改為自動
3.5 效果預覽
3.5.1 PC 端
點選「預覽」，效果如下圖所示：
3.6.2 行動端
預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：
4. 範本下載
點選下載範本：
