自定义 tileLayer 图层

  • 文档创建者:Holly
  • 编辑次数:14次
  • 最近更新:Leo.Tsai 于 2020-08-26
  • 1. 概述

    1.1 问题描述

    第三方地图会限制访问次数,当超出访问限制时,图层无法正常显示,因此建议访问量较大的地图自定义 tileLayer 图层。

    222

    1.2 解决思路

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

    Snag_4252e7ea.png

    2. 示例

    2.1 生成 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 报表设计

    2.2.1 准备数据

    新建决策报表,新建数据查询数据集 ds1 ,SQL 语句为:SELECT * FROM 地图1597630870718206.png

    2.2.2 插入图表

    地图拖拽到 body 中,地图类型选择区域地图,如下图所示:

    1597631058281234.png

    2.2.3 绑定数据

    绑定地图数据,展示每个省份对应的销售额,如下图所示:

    Snag_142cd469.png

    2.2.4 图层设置

    GIS 图层选择自定义 tileLayer,将 2.1 中生成的 URL 拷贝到编辑框中即可,如下图所示:

    Snag_142f62b5.png

    2.3 效果预览

    2.3.1 PC 端

    保存报表,点击表单预览,自定义图层效果如下图所示:

    1597631623988641.png

    2.3.2 移动端

    同时支持 App 端和 H5 端预览,效果如下图所示:

    2eb6b4829a9b9e5d5465f423daf9065.jpg

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\Map\自定义TileLayer.frm

    点击下载模板:自定义TileLayer.frm

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!