反饋已提交

網絡繁忙

地圖縮放等級API

1. 概述

1.1 版本

報表伺服器版本
功能變動
11.0-

1.2 應用場景

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

录屏2024-01-19 12.00.51.gif

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. 區域地圖範例

2.1 準備資料

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

Xnip2024-01-19_09-48-48.jpg

2.2 插入圖表

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

Xnip2024-01-19_11-47-43.jpg

2.3 設定地圖邊框和資料

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

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

Xnip2024-01-19_11-52-37.jpg

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] 。

步驟如下圖所示:

Xnip2024-01-19_11-59-17.jpg

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: [11832]});
  • 自動:將縮放等級修改為 "自動" ,並刪除 viewCenter 

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

2.5 效果預覽

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

3. 鑽取地圖範例

3.1 準備資料

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

3.2 插入圖表

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

Xnip2024-01-19_13-57-50.jpg

3.3 設定地圖邊框和資料

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

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

Xnip2024-01-19_14-11-56.jpg

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 。

步驟如下圖所示:

Xnip2024-01-19_14-17-52.jpg

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

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

3.5 效果預覽

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

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

录屏2024-01-19 14.28.56.gif

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

录屏2024-01-19 14.39.43.gif

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

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

Xnip2024-01-19_14-54-02.jpg

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

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

如下圖所示:

录屏2024-01-19 14.49.14.gif


4. 範本下載

附件列表


主題: 圖表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙