地图自定义GIS图层最大缩放等级

1.1 版本

1.2 应用场景

目前产品中地图的「GIS图层」缩放等级最大为 18，但部分场景下，客户可能需要自定义图层支持 18 以上缩放等级。

此时可通过 地图配置 自定义 GIS图层，在自定义的 URL 中添加参数 maxZoom 定义最大缩放等级，再在设计器中通过 地图缩放等级接口 实现缩放等级的调整。

注1：URL 添加参数支持 tilelayer/WMS/WMTS 图层，不支持高德地图图层。

注2：需与提供地图的服务商确认图层本身支持对应缩放层级。

注3：不支持移动端。

2.1 新建模板

合并一片单元格区域，选中单元格后点击上方工具栏插入图表按钮，插入一个区域地图。如下图所示：

2.2 地图配置

点击设计器顶部工具栏「服务器>地图配置」，选择「自定义GIS图层」。

本例选择已有的「tilelayer>深蓝」图层，在其 URL 后添加参数 ?maxZoom=25 ，即定义该图层最大缩放等级为 25 。最后点击「保存」完成设置。

如下图所示：

注：内置的「深蓝」图层，第三方厂商已经不再维护，无法保证稳定性，用户可以选择标准图层中的样式进行替换。详情可参考：文档 自定义TileLayer图层  1.3 节。

2.3 设置地图

2.3.1 设置 GIS 图层

回到设计器普通报表页面，点击地图进入单元格元素，设置「GIS图层」为「自定义>深蓝」。如下图所示：

2.3.2 设置加载结束事件

修改地图配置后，地图的「缩放等级」设置项中并不会增加选项。例如本例「深蓝」图层可选择的最大缩放等级为 16 ，设置 maxZoom 参数之后，设计器中可选最大缩放等级仍为 16 。如下图所示：

此时需要通过 JS 事件实现缩放等级的调整。

普通报表中，在「模板>模板Web属性>分页预览设置」中添加「加载结束」事件，JavaScript 代码如下：

setTimeout(function() { 
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); //获取地图对象
chart.setMapZoom({ zoomLevel: 20 }); //设置缩放等级为 20
}, 1000);

步骤如下图所示：

注1：决策报表中，选中地图，在「事件」中添加一个「初始化后」事件，再将 JavaScript 代码中「单元格」换成「地图组件名称」即可。

注2：FVS 模板中，在「模板>页面加载结束事件」处添加代码，其代码如下：

setTimeout(function() { 
var chart =duchamp.getWidgetByName("地图组件名称"); //获取地图对象
chart.setMapZoom({ zoomLevel: 6 }); //设置缩放等级为 20
}, 1000);

2.4 效果预览

本文示例所用「深蓝」图层最大缩放等级仅支持 16 ，即虽然本文示例可成功实现地图缩放等级为 20 的效果，但预览时，由于无法获取到超过 16 层级后的地图资源，放大后图层看不到任何地理信息。故本文不提供预览效果和模板下载，有需求的客户可参考本文方法实现对应需求。