FVS地圖縮放等級接口

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.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.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 代碼如下：

duchamp.getWidgetByName("區域地圖1_頁面1").setMapZoom({zoomLevel: 4, viewCenter: [121, 23]});

具體步驟如下圖所示：

其餘標題的 JavaScript 代碼分別如下：

• 5,[121,23]：將縮放等級修改為 5 

duchamp.getWidgetByName("區域地圖1_頁面1").setMapZoom({zoomLevel: 5, viewCenter: [121, 23]});

• 6,[121,23]：將縮放等級修改為 6

duchamp.getWidgetByName("區域地圖1_頁面1").setMapZoom({zoomLevel: 6, viewCenter: [121, 23]});

• 自動：將縮放等級修改為 "自動" ，並刪除 viewCenter 

duchamp.getWidgetByName("區域地圖1_頁面1").setMapZoom({zoomLevel: "自動"});

2.5 效果預覽

2.5.1 PC 端

點選範本右上角「儲存」按鈕，再點選「預覽」，預覽後的效果如 1.2節所示。

2.5.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

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

duchamp.getWidgetByName("鑽取區域地圖1_頁面2").setMapZoom({zoomLevel: 5});

具體操作步驟如下：

其餘的標題的代碼如下：

• 自動：將縮放等級修改為自動

duchamp.getWidgetByName("鑽取區域地圖1_頁面2").setMapZoom({zoomLevel: "自動"});

3.5 效果預覽

3.5.1 PC 端

點選「預覽」，效果如下圖所示：

3.6.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：

FVS地圖縮放等級接口.fvs