1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 |
|---|---|
| 11.0.16 | V1.15.1 |
1.2 应用场景
使用钻取地图时，需要使用鼠标手动操作进行地图钻取和中心点转移。
现提供一个方法，控件中输入经纬度后点击按钮转移中心点，选择区域名后点击按钮钻取到该区域。效果如下图所示：
1.3 实现思路
调用 图表相关接口 实现，接口如下：
panTo(loc) //转移位置
drillDown(areas[i]) //下钻到区域
getLayerIndex() // 获取当前钻取层级，获取的层级从0开始
drillUp(index) // 向上钻取
注：上述接口均不支持扩展图表。
2. 示例
2.1 新建模板
点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义模板名称和尺寸。如下图所示：
2.2 准备数据
点击左下角「＋」按钮，点击「内置数据集」。如下图所示：
1）新建内置数据集 Embedded1，如下图所示：
2）新建内置数据集 Embedded2，如下图所示：
2.3 设计地图
2.3.1 添加图表
点击组件区「图表」按钮，选择「地图类>钻取区域地图」。如下图所示：
2.3.2 设置地图边界和数据
1）选中钻取地图，点击右侧属性面板「内容>类型」，地图边界选择「中国」，其余设置可自行选择。如下图所示：
2）点击「数据>数据」，选择「各层级分别指定」，第 1 层绑定 Embedded1 的区域数据，第 2 层绑定 Embedded2 的市级数据。如下图所示：
2.4 设置点击事件
2.4.1 添加标题
点击组件区「文字」按钮，选择「标题」，共添加五个标题组件。如下图所示：
分别将其内容设置为经度、纬度、下钻取区域、中心点移动、根据区域向下钻。如下图所示：
2.4.2 添加控件
1）点击组件区「控件」按钮，添加两个文本框和一个下拉框。如下图所示：
2）最终页面布局如下图所示：
2.4.3 给标题添加点击事件
选中标题中心点移动，点击右侧属性面板「交互>添加点击事件」，添加一个 JavaScript 类型的点击事件，输入 JavaScript 代码如下：
var chart=duchamp.getWidgetByName("钻取区域地图1_页面1");
var jingdu=duchamp.getWidgetByName("文本框1_页面1").getValue();
var weidu=duchamp.getWidgetByName("文本框2_页面1").getValue();
var loc=[weidu*1,jingdu*1];
chart.panTo(loc);
具体步骤如下图所示：
其余标题的代码如下：
根据区域向下钻：根据指定区域向下钻取
var chart =duchamp.getWidgetByName("钻取区域地图1_页面1");//获取图表
var quyu = duchamp.getWidgetByName("下拉框1_页面1").getValue(); //获取下拉框控件值
if (chart.getLayerIndex() > 0)
chart.drillUp(chart.getLayerIndex() - 1); //若已经下钻，点击其他区域需返回上一层级后再次下钻
var areas = [];
chart.getSeries().forEach(ser => areas.push(...ser.points));
var len = areas.length;
for (var i = 0; i < len; i++) {
if (areas[i].name == quyu) {
chart.drillDown(areas[i]);
break;
}
}2.5 效果预览
2.5.1 PC 端
点击模板右上角「保存」按钮，再点击「预览」，预览后的效果如 1.2节所示。
2.5.2 移动端
预览方式请参考 FVS移动端预览 ，效果如下图所示：
3. 模板下载
点击下载模板：FVS点击标题转移地图中心点和钻取.fvs
