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

1.1 預期效果

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

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

1.2 實現思路

調用圖表相關接口實現，接口包括：

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

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

注：上述接口均不支持移動端。

2.1 準備數據

1）新建決策報表，新建内置數據集 Embedded1，如下圖所示：

2）新建内置數據集 Embedded2，如下圖所示：

2.2 模板布局

拖入參數面板，添加控件和鑽取區域地圖，如下圖所示：

2.3 控件屬性

給下拉框控件設置數據字典，如下圖所示：

2.4 綁定地圖數據

數據按各層級分别指定，第 1 層數據如下圖所示：

第 2 層數據如下圖所示：

2.5 添加點擊事件

2.5.1 中心點移動

選中中心點移動按鈕，添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

var charts=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0];//獲取圖标對象，即鑽取地圖
var form=this.options.form;//獲取當前表單
var jingdu=form.getWidgetByName("jingdu").getValue();//獲取經度文本框
var weidu=form.getWidgetByName("weidu").getValue();//獲取緯度文本框
var loc=[weidu*1,jingdu*1];
charts.panTo(loc);//根據經緯度移動中心點

2.5.2 根據區域名下鑽

選中根據區域名下鑽按鈕，添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

var charts=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0];//獲取圖表對象，即鑽取地圖
var form=this.options.form;//獲取當前表單
var quyu=form.getWidgetByName("quyu").getValue();//獲取下拉框控件
var areas= [];
//根據區域下鑽
charts.series.forEach(ser => areas.push(...ser.points));
var len=areas.length;
for(var i=0;i<len;i++){
        if(areas[i].name==quyu){
                charts.drillDown(areas[i]);
                break;
        }
}

2.6 效果預覽

保存模板，點擊PC端預覽，效果如1.1預期效果中所示：

注：不支持移動端。

已完成模板參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\Map\點擊按鈕轉移地圖中心點和鑽取.frm

點擊下載模板：點擊按鈕轉移地圖中心點和鑽取.frm