[新]JS实现点击按钮转移地图中心点和钻取

编辑
  • 文档创建者:jiangsr
  • 浏览次数:4547次
  • 编辑次数:9次
  • 最近更新:Carly 于 2019-10-12
  • 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

    附件列表


    主题: 图表应用
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]