历史版本10 :JS实现点击按钮转移地图中心点和钻取 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

地图展示出来之后,目前是需要鼠标手动去操作地图才能够实现地图的中心点移动以及钻取。

现提供一个方法使得输入经纬度后点击按钮转移中心点,输入区域名后点击按钮钻取,效果如下图所示:

222

2. 示例编辑

2.1 数据准备

新建决策报表,添加内置数据集:

222  

222

2.2 模板制作

拖入参数面板,控件和地图,样式如下图所示:

222

2.3 控件属性

2.3.1 下拉框控件

给下拉框控件设置数据字典,如下图所示:

222

2.3.2 按钮控件

中心点移动按钮控件添加点击事件,如下图所示:

222

JS 代码如下:

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);//转移位置

同理,给根据区域名下钻按钮控件添加点击事件,JS 代码如下:

var charts=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0];//获取图表对象  
var form=this.options.form;  
var quyu=form.getWidgetByName("quyu").getValue();//获取区域  
var areas=charts.validPoints;  
var len=areas.length;  
for(var i=0;i<len;i++){  
if(areas[i].name==quyu){  
charts.drillDown(areas[i]);//下钻到区域  
break;  
}  
}

2.4 地图制作

2.4.1 图表类型

地图边界初始状态等设置如下图所示:

222

2.4.2 图表数据

数据按各层级分别指定,设置如下图所示:

222

222
图表样式设置不再一一介绍。

3. 保存与预览编辑

注:移动端不支持

保存模板,点击分页预览,效果如下图所示:

222

4. 已完成模板编辑

已完成模板请参照%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\Map\点击按钮转移地图中心点和钻取.frm

点击下载模板:点击按钮转移地图中心点和钻取.frm