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().getWidgetByName("jingdu").getValue();//獲取經度正文框
var weidu=_g().getWidgetByName("weidu").getValue(); //獲取緯度正文框
var loc=[weidu*1,jingdu*1];chart.panTo(loc); //根據經緯度行動中心點

如下圖所示：

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;
        }
}

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

注：不支援行動端。

已完成範本參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\Map\點選按鈕轉移地圖中心點和鑽取.frm

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\Map\點選按鈕轉移地圖中心點和鑽取.cpt

點選下載範本：點選按鈕轉移地圖中心點和鑽取.frm

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