FVS点击标题转移地图中心点和钻取

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 应用场景

使用钻取地图时，需要使用鼠标手动操作进行地图钻取和中心点转移。

现提供一个方法，控件中输入经纬度后点击按钮转移中心点，选择区域名后点击按钮钻取到该区域。效果如下图所示：

1.3 实现思路

调用 图表相关接口 实现，接口如下：

• panTo(loc)  //转移位置

• drillDown(areas[i])  //下钻到区域 

• getLayerIndex()  // 获取当前钻取层级，获取的层级从0开始
  

• drillUp(index)  // 向上钻取

注：上述接口均不支持扩展图表。

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移动端预览 ，效果如下图所示：

点击下载模板：FVS点击标题转移地图中心点和钻取.fvs