FVS地图缩放等级接口

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

1.1 版本

1.2 应用场景

普通地图提供了缩放等级接口，通过 JavaScript 点击事件，预览时可点击标题选择缩放层级实现地图的缩小或放大。效果如下图所示：

1.3 实现思路

可通过接口duchamp.getWidgetByName("区域地图1_页面1").setMapZoom({zoomLevel: 5, viewCenter: [110, 40]});设置地图的中心点和对应的缩放等级。

• zoomLevel：缩放等级，值区间一般在 0-18。数值越大，层级越高，地图显示越细致，显示的经纬度范围越小。

• viewCenter：中心点，[经度，纬度]。

注1：缩放等级的区间与各个图层支持的缩放等级一致。比如图层为高德地图时，缩放区间为 [3,18]；图层为无时，缩放区间为 [0,18]。

注2：该接口不支持扩展图表。

2.1 新建模板

点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义模板名称和尺寸。如下图所示：

2.2 准备数据

在报表左下方新建数据库查询 ds1，SQL 查询语句为：SELECT * FROM 地图 where 省份='江苏省' 。如下图所示：

2.3 设计地图

2.3.1 添加图表

点击组件区「图表」按钮，选择「地图类>区域地图」。如下图所示：

2.3.2 设置地图边界和数据

选中区域地图，点击右侧属性面板「内容>类型」，设置地图边界为「中国」，GIS 图层为「标准>标准」，缩放等级和中心点均保持默认的「自动」。

点击「数据」，绑定地图数据集。如下图所示：

2.4 设置点击事件

2.4.1 添加标题

点击组件区「其他」按钮，选择「标题」，共添加四个标题组件。如下图所示：

分别将其内容设置为 4,[118,32]、5,[118,32]、6,[118,32]、自动 。如下图所示：

2.4.2 给标题添加点击事件

选中标题 4,[118,32]，点击右侧属性面板「交互>添加点击事件」，添加一个 JavaScript 类型的点击事件，输入 JavaScript 代码如下：

duchamp.getWidgetByName("区域地图1_页面1").setMapZoom({zoomLevel: 4, viewCenter: [118, 32]});

具体步骤如下图所示：

其余标题的 JavaScript 代码分别如下：

• 5,[118,32] ：将缩放等级修改为 5 

duchamp.getWidgetByName("区域地图1_页面1").setMapZoom({zoomLevel: 5, viewCenter: [118, 32]});

• 6,[118,32] ：将缩放等级修改为 6

duchamp.getWidgetByName("区域地图1_页面1").setMapZoom({zoomLevel: 6, viewCenter: [118, 32]});

• 自动：将缩放等级修改为 "自动" ，并删除 viewCenter 

duchamp.getWidgetByName("区域地图1_页面1").setMapZoom({zoomLevel: "自动"});

2.5 效果预览

2.5.1 PC 端

点击模板右上角「保存」按钮，再点击「预览」，预览后的效果如 1.2节所示。

2.5.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

3.1 新建页面

点击画布下方「点击新建页面」，新建 页面2 。如下图所示：

3.2 准备数据

与 2.2 节一致，新建页面后，在报表左下方新建数据库查询 ds2，SQL 查询语句为：SELECT * FROM 地图 where pid='江苏省' 。

3.3 设计地图

3.3.1 添加图表

点击组件区「图表」按钮，选择「地图类>钻取区域地图」。如下图所示：

3.3.2 设置地图边界和数据

选中钻取区域地图，点击右侧属性面板「内容>类型」，设置地图边界为「中国」，GIS 图层为「标准>标准」，缩放等级和中心点均保持默认的「自动」。

点击「数据>数据」，选择「各层级分别指定」，第 1 层区域名选择「pid」，第 2 层区域名选择「省份」。如下图所示：

3.4 设置点击事件

3.4.1 添加标题组件

点击组件区「其他」按钮，选择「标题」，共添加两个标题组件，别将标题重命名为5、自动。步骤如 2.4.1 一致。

3.4.2 给标题添加点击事件

选中标题 5，点击右侧属性面板「交互>添加事件>鼠标点击」，添加一个 JavaScript 类型的点击事件，输入 JavaScript 代码如下：

• 5：将缩放等级修改为 5

duchamp.getWidgetByName("钻取区域地图1_页面2").setMapZoom({zoomLevel: 5});

具体操作步骤如下：

其余的标题的代码如下：

• 自动：将缩放等级修改为自动

duchamp.getWidgetByName("钻取区域地图1_页面2").setMapZoom({zoomLevel: "自动"});

3.5 效果预览

3.5.1 PC 端

点击「预览」，效果如下图所示：

3.6.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

本文示例接口也可直接在地图的交互事件中设置，钻取地图还可以选择「图形」或「钻取目录」设置。如下图所示：

但若在地图上添加多个 JavaScript 点击事件，不支持点击地图弹出多个选项以供选择，请根据实际场景选择设置方式。

点击下载模板：FVS地图缩放等级接口.fvs