地圖縮放等級API

1.1 版本

1.2 應用場景

普通地圖提供了縮放等級API，透過設定 JavaScript 超級連結，預覽時可點選地圖選擇縮放層級實現地圖的縮減或放大。效果如下圖所示：

1.3 實現思路

可透過API chart.setMapZoom({zoomLevel: 5, viewCenter: [110, 40]}); 設定地圖的中心點和對應的縮放等級。

• zoomLevel：縮放等級，值區間一般在 0-18。數值越大，層級越高，地圖顯示越細緻，顯示的經緯度範圍越小。

• viewCenter：中心點，[經度，緯度]

注1：縮放等級的區間與各個圖層支援的縮放等級一致。比如圖層為高德地圖時，縮放區間為 [3,18]；圖層為無時，縮放區間為 [0,18]。

注2：該API不支援行動端。

注3：該API不支援擴展圖表。

注4：FVS 視覺化看板詳情可見：FVS地圖縮放等級API 。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，在報表左下方建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 地圖 where 省份='江蘇省' 。

2.2 插入圖表

合併一片儲存格區域，點選「插入圖表」按鈕，選擇「地圖>區域地圖」。如下圖所示：

2.3 設定地圖邊框和資料

選中地圖，點選右側屬性面板「儲存格元素>類型」，設定地圖邊框為「中國」，GIS 圖層為「標準>標準」，縮放等級和中心點均保持預設「自動」。

點選「資料」，綁定地圖資料集。如下圖所示：

2.4 新增超級連結

1）選中 A1 儲存格，點選右側屬性面板「儲存格元素>特效>交互屬性」，新增一個 JavaScript 類型的超級連結，在彈出的設定框中輸入 JavaScript 程式碼：

注：在決策報表中操作步驟相同，僅需修改 JavaScript 程式碼中獲取圖表塊物件的 chartID，例如將 A1 修改為 chart0 。

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); //獲取 A1 儲存格中的圖表物件
chart.setMapZoom({zoomLevel:4,viewCenter: [118,32]}); //設定縮放等級為 4 ，中心點經度為 118，緯度為32

雙擊列表中超連結的名稱，將其重新命名為 4,[118,32] 。

步驟如下圖所示：

2）選中已設定完成的 4,[118,32] 超連結，點選超連結列表上方的  複製按鈕，再複製 3 個超連結，分別重新命名為 5,[118,32]、6,[118,32]、自動

JavaScript 程式碼修改分別如下：

• 5,[118,32] ：將縮放等級修改為 5 

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
chart.setMapZoom({zoomLevel:5, viewCenter: [118,32]});

• 6,[118,32] ：將縮放等級修改為 6

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
chart.setMapZoom({zoomLevel:6, viewCenter: [118, 32]});

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

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
chart.setMapZoom({zoomLevel:"自動"});

2.5 效果預覽

儲存報表，點選 分頁預覽 ，效果如 1.2 應用場景中所示。

3.1 準備資料

與 2.1 節一致，建立普通報表後，在報表左下方建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 地圖 where pid='江蘇省' 。

3.2 插入圖表

合併一片儲存格區域，點選「插入圖表」按鈕，選擇「鑽取地圖>區域地圖」。如下圖所示：

3.3 設定地圖邊框和資料

選中地圖，點選右側屬性面板「儲存格元素>類型」，設定地圖邊框為「中國」，GIS 圖層為「標準>標準」，縮放等級和中心點均保持預設「自動」。

點選「資料>資料」，選擇「各層級分別指定」，第 1 層區域名選擇「pid」，第 2 層區域名選擇「省份」。如下圖所示：

3.4 新增超級連結

1）選中 A1 儲存格，點選右側屬性面板「儲存格元素>特效>交互屬性」，在「超級連結」處新增一個 JavaScript 類型的超級連結，在彈出的設定框中輸入 JavaScript 程式碼：

注：在決策報表中操作步驟相同，僅需修改 JavaScript 程式碼中獲取圖表塊物件的 chartID，例如將 A1 修改為 chart0 。

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);//獲取圖表物件
chart.setMapZoom({zoomLevel:5});//設定縮放等級為 5

雙擊列表中超連結的名稱，將其重新命名為 5 。

步驟如下圖所示：

2）選中已設定完成的超連結，點選超連結列表上方的  複製按鈕，再複製一個超連結，重新命名為「自動」，將 JavaScript 程式碼中的縮放等級修改為 "自動" 

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
chart.setMapZoom({zoomLevel:"自動"});

3.5 效果預覽

儲存報表，點選「分頁預覽」，效果如下圖所示：

鑽取地圖鑽取時，若設定了多個等級，預設按「自動」等級縮放，點選有數值的區域，可選擇其他縮放等級。

若只設定了一個等級，則按照設定的等級縮放，例如只設定了等級為 5 ，其效果如下圖所示：

3.6 擴展-鑽取目錄新增超連結

鑽取地圖還可以再鑽取目錄處新增超連結，如下圖所示：

在鑽取目錄處新增超連結設定縮放等級API後，對點選的目錄層級有效。

例如點選目錄「中國」，則中國地圖改變縮放等級，若下鑽到江蘇省，點選目錄「江蘇省」，則江蘇省區域地圖改變縮放等級。

如下圖所示：

點選下載範本：

縮放等級_區域地圖.cpt

縮放等級_鑽取地圖.cpt