反馈已提交

网络繁忙

您正在浏览的是 FineBI6.0 帮助文档,点击跳转至: FineBI5.1帮助文档

自定义图片地图

  • 文档创建者:doreen0813
  • 历史版本:21
  • 最近更新:April陶 于 2023-11-08
  • 1. 概述

    1.1 预期效果

    内置的地图只适合展示地图信息,如果想要自定义一个商场楼层平面图,该如何实现呢?

    1656835430163981.gif

    1.2 实现方法

    管理员进入平台,在「管理系统>地图配置」处制作自定义图片,也就是制作地图边界。有了地图边界后,在仪表板中需要使用「自定义图表」来实现自定义的地图效果。

    1.3 内网说明

    「地图配置」界面,需联网请求高德 API 资源或者给以下地图 API 开启白名单才能使用,否则地理信息、自定义图片图层无法显示。

    • webapi.amap.com

    • vdata.amap.com

    • restapi.amap.com

    若用户不能连接外网或开启白名单,可以在 5.1.24 之前的版本中设置好的自定义图片地图的 json 文件放置到正式工程的对应路径里(详细可参见:自定义地图资源),地理角色匹配 时就可直接用到此自定义地图。

    2. 制作自定义图片

    1)管理员进入平台,点击「管理系统>地图配置>自定义图片」,点击目录右上角添加自定义图片按钮,将自定义图片命名为2Fmarket,点击「确定」。如下图所示:

    3.png

    2)选中新建的「2Fmarket」,点击右侧导入图片」按钮,示例中导入一张商场二楼平面图。如下图所示:

    注1:导入的图片可自适应大小,也可以通过滚轮自由缩放大小。

    注2:上传图片大小限制为 2M,也就是 Tomcat 默认 post 大小限制,用户可自行设置为不限制图片大小,设置方法参见文档 WangEditor富文本控件插件 第四章的内容。

    11.png

    3)使用画矩形工具将每个商家的区域圈出来,并设置区域名为对应商家的编号,所有商家都设置完毕后,点击右上角「保存」按钮即可。如下图所示:

    注:如果需要圈出的区域是不规则形状,那么可以使用「画多边形工具」进行描点。、

    12.png

    4)至此自定义图片制作完成,生成的 JSON 文件保存在%FineBI_HOME%\webapps\webroot\WEB-INF\assets\map\image目录下,如下图所示:

    注:JSON 文件可以直接拷贝到其他工程下使用,地图文件生效方法请参见:地图文件更新 文档的 2.2 节内容。

    1635477179584720.png

    3. 制作自定义图片地图

    3.1 准备数据

    1)管理员进入系统,点击「我的分析」,选中某个文件夹,点击「新建分析主题」。如下图所示:

    01.png

    2)点击「本地Excel文件>上传数据」,上传表数据。如下图所示:

    示例数据:商场自定义地图.xlsx

    02.png

    3)上传后,点击「确定」按钮。如下图所示:

    4.png

    4)点击右上角「编辑」按钮。如下图所示:

    6.png

    5)全选表字段,在字段设置中,将商铺名字段设置为「文本」,点击「保存并更新」按钮。如下图所示:

    7.png

    6)点击退出并预览按钮。如下图所示:

    8.png

    3.2 创建组件

    1)点击左下角「组件」按钮。如下图所示:

    9.png

    2)点击维度字段商铺名的下拉按钮,选择「地理角色(无)>自定义图片」。如下图所示:

    10.png

    3)自定义图片选择「2Fmarket」,店铺名会自动跟制作地图边界时设置的区域名匹配。如下图所示:

    19.png

    4)图表类型选择「自定义图表」,将转化为地理角色的 2 个维度字段分别拖到横轴和纵轴处,图形属性下的下拉框内选择「填充地图」。如下图所示:

    14.png

    3.3 图形属性

    3.3.1 设置标签

    将「商铺名」字段拖入到标签处。如下图所示:

    15.png

    3.3.2 设置颜色

    点击「颜色」栏,设置颜色。如下图所示:

    16.png

    3.3.3 设置提示

    品牌商品字段拖入到提示框中。如下图所示:

    17.png

    注:更多设置请参见:图表组件样式图形属性

    3.4 效果预览

    3.4.1 PC 端

    进入仪表板后,实际预览效果如下图所示:

    1656835412878373.gif

    3.4.2 移动端

    App 及 HTML5 端效果如下图所示:

    23.jpg


    附件列表


    主题: 制作可视化组件
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持