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