历史版本5 :JS实现点击按钮转移地图中心点和钻取 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1.描述编辑
地图展示出来之后，目前是需要鼠标手动去操作地图才能够实现地图的中心点移动以及钻取。
现提供一个方法使得输入经纬度后点击按钮转移中心点，输入区域名后点击按钮钻取，效果如下图：
2.示例编辑
2.1 数据准备
新建决策报表，添加内置数据集：
2.2 模板样式制作
拖入参数面板，控件和地图，样式如下：
2.3 控件属性
（1）下拉框控件
给下拉框控件设置数据字典，如下：
（2）按钮控件
给【中心点移动】按钮控件添加点击事件：
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);//转移位置
同理，给【根据区域名下钻】按钮控件添加点击事件：
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 地图制作
（1）图表类型
地图边界初始状态等设置如下：
（2）图表数据
数据按各层级分别指定，设置如下：
图表样式设置不再一一介绍。
2.5 保存与预览
保存模板，点击分页预览，效果如上图。
已完成模板请参照%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\Map\点击按钮转移地图中心点和钻取.frm