历史版本27 :自定义TileLayer图层 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本
功能变动
11.0-
11.0.6自定义 TileLayer 图层支持的投影方式由一种变为三种。详情参见第 3 章

1.2 功能简介

第三方地图会限制访问次数,当访问量较大超出访问限制时,图层可能无法正常显示。如下图所示:

222

此时可使用自定义 TileLayer 图层功能。

FineReport 支持在设计器模板中仅对当前模板地图自定义 TileLayer 图层。也支持在数据决策系统「地图配置>自定义 GIS 图层」中自定义  TileLayer 图层,可作用于当前报表服务器下所有模板。

Snag_434b0cf0.png

2. 示例编辑

自定义 TileLayer 图层推荐一个地图供应厂商:Mapbox,在其官方网站生成图层 URL 后拷贝到地图自定义 TileLayer 下的 URL 编辑框中即可。

2.1 生成 URL 链接

注:以下生成的 URL 只是一个简单的示例,因为是非产品相关,更加详细的配置需要您自行查阅相关资料。

1)打开 Mapbox官网 ,如果没有账号点击下方按钮注册,已有账号直接登录即可。
1597308024947186.png

2)登录账号后点击右上方个人中心下拉按钮,选择 Studio,如下图所示:

1597308040714532.png

3)新打开的页面点击 New style 创建一个自定义图层,如下图所示:

1597308171362124.png

4)任意选择一个图层模板如 Outdoors,点击 Customize Outdoors ,进入图层编辑界面,如下图所示:

1597308352104747.png

5)图层编辑界面左侧可以设置图层属性,按照自己的需求进行设置即可,如下图所示:

1597309085411510.png

6)如下图步骤生成第三方共享图层链接,点击复制按钮将 URL 复制到剪贴板,如下图所示:

1597309337989090.png

2.2 新建自定义高德地图图层

1)在设计器中,点击顶部菜单栏「服务器>地图配置」,登录数据决策系统,跳转到地图配置界面。

Snag_3ee4da9a.png

2)选择「自定义GIS图层」,新建一个目录并命名。选中创建的新目录,选择「TileLayer」,填写 URL。

本例使用 URL 为:https://api.mapbox.com/styles/v1/leotsai/ckdskdlj810ve19nvkvkbpdig/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibGVvdHNhaSIsImEiOiJja2RzaTQzNG8wZjE2MnJxczh0b2xnM2djIn0.-VMQ4r1GsulAVcZS9nM7rQ

注:Attribute 填写内容为地图图层角标,建议根据实际使用的地图厂商进行填写。

然后点击「加载图层」,右侧出现自定义的地图图层样式。

最后点击右上角「保存」设计器中即可生效。如下图所示:

Snag_43bb0a8e.png

2.3 模板地图应用GIS图层

在上一步「同步地理文件」后,在设计器的任意模板中,地图 GIS 图层选择「自定义」时,即可选择新建的 TileLayer 图层。如下图所示:

2022-06-27_19-53-02.png

模板预览的地图图层效果如下图所示:

Snag_435b8adc.png

App 端和 HTML5 端预览效果如下图所示:

Snag_1387667f.png

2.4 单个模板中自定义 TileLayer 图层

自定义 TileLayer 图层支持对当前模板单独设置。

在地图类型「GIS图层」处,选择「自定义>自定义TileLayer」,输入 URL 即可。

如下图所示:

Snag_435d9ec8.png

3. 注意事项编辑

1)自定义图层的 URL 中是不支持 {r} 参数的,如果有该参数那么前端预览时图层不会显示,解决该问题,只需要把 URL 中的 {r} 参数删掉即可。

2)11.0.6 版本之前的设计器中,自定义 TileLayer 图层仅支持投影方式为 EPSG:3857。11.0.6 版本及之后的设计器中,可支持三种投影方式 EPSG:3857、EPSG:4326、EPSG:3395 。

3)内置的「卫星」图层,若加载不出来,请自行修改 URL 为:http://{s}.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}{r}.png?access_token=pk.eyJ1Ijoid2FuZ2p1bjEzMDMiLCJhIjoiY2l4OHBscnYwMDAwdTJ5cWY5cnRrZGM0ZSJ9.FQy75sTd5x1dujqvTsLzvA