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

1.1 版本

1.2 應用場景

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

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

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

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

注3：不支援行動端。

2.1 建立範本

點選設計器左上角「檔案>建立決策報表」，建立一張空白範本，向 body 中拖入地圖。如下圖所示：

2.2 地圖配置

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

2.3 設定地圖

2.3.1 設定 GIS 圖層

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

2.3.2 設定初始化後事件

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

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

按選中地圖，在「事件」中新增一個「初始化後」事件，JavaScript 代碼如下：

注：若地圖在編輯狀態，需先選中其他組件，再按選中地圖。

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

注：普通報表中，需在「範本>範本Web屬性>分頁預覽設定」中新增「載入結束」事件，將 JavaScript 代碼中 chart0 換成地圖所在儲存格即可。

步驟如下圖所示：

2.4 效果預覽

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