JS實現點擊按鈕轉移地圖中心點和鑽取

1.1 版本

1.2 預期效果

使用鑽取地圖時，需要使用滑鼠手動操作進行地圖鑽取和中心點轉移。

現提供一個方法，元件中輸入經緯度後點選按鈕轉移中心點，選擇區域名後點選按鈕鑽取到該區域。效果如下圖所示：

1.3 實現思路

呼叫圖表相關API實現，API如下：

• chart.panTo(loc)  //轉移位置

• charts.drillDown(areas[i])   //下鑽到區域 

• chart.getLayerIndex()   // 獲取當前鑽取層級，獲取的層級從0開始

• chart.drillUp(index)  // 向上鑽取

注1：上述API均不支援行動端。

注2：上述API均不支援擴展圖表。

2.1 準備資料

點選設計器左上角「檔案>建立決策報表」，建立空白範本。

1）建立內建資料集 Embedded1，如下圖所示：

2）建立內建資料集 Embedded2，如下圖所示：

2.2 設計範本

向 body 中拖入「鑽取地圖」和「參數面板」，最終效果如下圖所示：

2.2.1 鑽取地圖設定

1）雙擊鑽取地圖，進入編輯狀態，型別選擇「區域地圖」，地圖邊框選擇「中國」，其餘設定可自行選擇。如下圖所示：

2）地圖資料選擇「各層級分別指定」，第 1 層綁定 Embedded1 的區域資料，第 2 層綁定 Embedded2 的市級資料。如下圖所示：

2.2.2 設定參數面板

1）選中參數面板 para，將「點選查詢前不顯示報表內容」取消勾選，否則地圖在點選「查詢」前不會顯示。如下圖所示：

2）將要使用的元件直接拖入參數面板，各元件設定及用途如下：

• 拖入 3 個標籤元件，作提示文字使用。設定「屬性>元件值」分別為字串「經度」、「緯度」、「下鑽區域名」。

• 拖入 2 個文字元件，預覽範本時用來輸入經度和緯度。分別設定「屬性>元件名稱」為「jingdu」、「weidu」。

• 拖入 1 個下拉框元件，用來綁定地圖區域。設定「屬性>元件名稱」為「quyu」，綁定資料字典如下圖所示：

• 拖入 2 個按鈕元件，按鈕名稱分別為「中心點行動」，「根據區域名下鑽」。

2.3 添加點選事件

2.3.1 中心點行動

選中「中心點行動」按鈕，添加一個點選事件，輸入 JavaScript 代碼：

var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); //獲取圖表物件
var jingdu=_g().getParameterContainer().getWidgetByName("jingdu").getValue();//獲取經度文字框
var weidu=_g().getParameterContainer().getWidgetByName("weidu").getValue(); //獲取緯度文字框
var loc=[weidu*1,jingdu*1];
chart.panTo(loc); //根據經緯度行動中心點 

注：11.0 決策報表舊自適應下需要使用 _g().getParameterContainer().getWidgetByName("textEditor0").getValue() 獲取元件值。

如下圖所示：

2.3.2 根據區域名下鑽

選中「根據區域名下鑽」按鈕，添加一個點選事件，輸入 JavaScript 代碼：

var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);//獲取圖表物件
var quyu=_g().getWidgetByName("quyu").getValue();//獲取下拉框元件的值
if (chart.getLayerIndex() > 0)
chart.drillUp(chart.getLayerIndex() - 1);// 若已經下鑽，點選其他區域需傳回上一層級後再次下鑽
var areas= [];
//根據區域下鑽
chart.series.forEach(ser => areas.push(...ser.points));
var len=areas.length;
for(var i=0;i<len;i++){
        if(areas[i].name==quyu){
                chart.drillDown(areas[i]);
                break;
        }
}

如下圖所示：

2.4 效果預覽

保存範本，點選「PC端預覽」，效果如 1.1 預期效果中所示。

注：不支援行動端。

在普通報表中，設定圖表和參數面板的方法是一致的。不同的是，在按鈕點選事件中，圖表物件以及呼叫參數元件的方法有所不同。

• 圖表物件需換成圖表所在的儲存格，如 var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); 

• 普通報表中獲取參數面板元件時需呼叫參數面板API，如 var jingdu=_g().getParameterContainer().getWidgetByName("jingdu").getValue();

所以在普通報表中，「中心點行動」按鈕點選事件的 JavaScript 代碼如下：

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); //獲取圖表物件
var jingdu=_g().getParameterContainer().getWidgetByName("jingdu").getValue();//獲取經度文字框
var weidu=_g().getParameterContainer().getWidgetByName("weidu").getValue(); //獲取緯度文字框
var loc=[weidu*1,jingdu*1];
chart.panTo(loc); //根據經緯度行動中心點 

「根據區域名下鑽」按鈕點選事件的 JavaScript 代碼如下：

var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);//獲取圖表物件
var quyu=_g().getParameterContainer().getWidgetByName("quyu").getValue();//獲取下拉框元件的值
if (chart.getLayerIndex() > 0)
chart.drillUp(chart.getLayerIndex()- 1); // 若已經下鑽，點選其他區域需返回上一層級後再次下鑽
var areas= [];
//根據區域下鑽
chart.series.forEach(ser => areas.push(...ser.points));
var len=areas.length;
for(var i=0;i<len;i++){
        if(areas[i].name==quyu){
                chart.drillDown(areas[i]);
                break;
        }
}

普通報表分頁預覽效果如下圖所示：

注：不支援行動端。

點選下載範本：

點選按鈕轉移地圖中心點和鑽取.frm

點選按鈕轉移地圖中心點和鑽取.cpt