地圖自訂GIS圖層最大縮放等級

1.1 版本

報表伺服器版本	功能變動
11.0.15	新增：地圖配置>自訂GIS圖層，支援使用 maxZoom/minZoom 自訂最大/最小縮放等級

1.2 應用場景

目前產品中地圖的「GIS圖層」縮放等級最大為 18，但部分場景下，客戶可能需要自訂圖層支援 18 以上縮放等級。

此時可透過 地圖配置 自訂 GIS圖層，在自訂的 URL 中新增參數 maxZoom 定義最大縮放等級，再在設計器中透過 地圖縮放等級API 實現縮放等級的調整。

注1：URL 新增參數支援 tilelayer/WMS/WMTS 圖層，不支援高德地圖圖層。

注2：需與提供地圖的服務商確認圖層本身支援對應縮放層級。

注3：不支援行動端。

2.1 建立範本

合併一片儲存格區域，被選儲存格後點選上方工具欄插入圖表按鈕，插入一個區域地圖。如下圖所示：

2.2 地圖配置

點選設計器頂部工具欄「伺服器>地圖配置」，選擇「自訂GIS圖層」。本例選擇已有的「tilelayer>深藍」圖層，在其 URL 後新增參數 ?maxZoom=25 ，即定義該圖層最大縮放等級為 25 。最後點選「儲存」完成設定。如下圖所示：

注：內建「深藍」圖層，第三方廠商已經不再維護，無法保證穩定性，使用者可以選擇標準圖層中的樣式進行更換。

2.3 設定地圖

2.3.1 設定 GIS 圖層

回到設計器決策報表頁面，雙擊地圖進入編輯狀態，設定「GIS圖層」為「自訂>深藍」。如下圖所示：

2.3.2 設定載入結束事件

修改地圖配置後，地圖的「縮放等級」設定項中並不會增加選項。例如本例「深藍」圖層可選擇的最大縮放等級為 16 ，設定 maxZoom 參數之後，設計器中可選最大縮放等級仍為 16 。如下圖所示：

此時需要透過 JS 事件實現縮放等級的調整。

普通報表中，在「範本>範本Web屬性>分頁預覽設定」中新增「載入結束」事件，JavaScript 程式碼如下：

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

步驟如下圖所示：

注1：決策報表中，選中地圖，在「事件」中新增一個「初始化後」事件，再將 JavaScript 程式碼中「儲存格」換成「地圖組件名稱」即可。

注2：FVS 範本中，在「範本>頁面載入結束事件」處新增程式碼，其程式碼如下：

setTimeout(function() { 
var chart =duchamp.getWidgetByName("地圖組件名稱"); //獲取地圖物件
chart.setMapZoom({ zoomLevel: 6 }); //設定縮放等級為 20
}, 1000);

2.4 效果預覽

本文範例所用「深藍」圖層最大縮放等級僅支援 16 ，即雖然本文範例可成功實現地圖縮放等級為 20 的效果，但預覽時，由於無法獲取到超過 16 層級後的地圖資源，放大後圖層看不到任何地理資訊。故本文不提供預覽效果和範本下載，有需求的客戶可參考本文方法實現對應需求。