1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 |
|---|---|
| 11.0.16 | V1.15.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. 区域地图示例
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. 钻取地图示例
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移动端预览 ，效果如下图所示：
4. 注意事项
本文示例接口也可直接在地图的交互事件中设置，钻取地图还可以选择「图形」或「钻取目录」设置。如下图所示：
但若在地图上添加多个 JavaScript 点击事件，不支持点击地图弹出多个选项以供选择，请根据实际场景选择设置方式。
5. 模板下载
点击下载模板：FVS地图缩放等级接口.fvs
