数据上图 WebApp 扩展流程

发送反馈

数据上图WebApp支持扩展定制 Logo 跳转链接、左侧的 Tabs 标签页，以及矢量图层样式中使用的点线符号集。本节将介绍数据上图WebApp的扩展流程。

在路径【iPortal 产品包】 /webapps/iportal/WEB-INF/lib/ 找到并解压 webjar-dataviz-*.jar，在解压目录/META-INF/resources/apps/dataviz/libs/plugins下，可获取数据上图WebApp扩展定制有关的配置文件PluginsConfig.js、symbol-point.json和symbol-line.json。

扩展Tab标签页

  1. 新建一个js文件，在 js 文件中实例化 DataViz.Plugins.DatavizPlugins，如下所示：

   let plugins = new DataViz.Plugins.DatavizPlugins({

        changeTabCallback: changeMenuTab

    });

  1. 实现步骤 1 中 changeTabCallback 接口对应的回调函数 changeMenuTab，即在 changeMenuTab 函数 中添加符合您项目需求的开发代码。开发时，您可参考 iPortal 提供的 RESTAPI 和数据上图 开放的接口。
  2. 在配置文件 PluginsConfig.js 中，添加新扩展的 Tab 标签页及相应的 js 与 css 文件，如下粗体代码所示：

window.DataViz.Plugins = {

    // 默认点击左上角logo，打开iPortal首页

    logoHref: "",

    // 默认点击左上角logo，打开新的浏览器标签

    logoHrefTargetSelf: false,

    //左侧需要显示的 Tabs 标签页

    menus: [{

        //图层 Tab 项（默认界面已提供）

        id: 'dv-layers',

        title: DataViz.Language.layerManagement,

        iconClass: 'supermapol-icons-layers'

    },{

        //设置 Tab 项（默认界面已提供）

        id: 'dv-settings',

        title: DataViz.Language.mapSetting,

        iconClass: 'supermapol-icons-setting'

    }

    ,{

        //示范扩展项

        id: 'dv-extension',

        title: '扩展',

        iconClass: 'supermapol-icons-roadnetwork'

    }

    ]

    ,

    //扩展js文件（相对路径）

    jsFile: ['sample/Sample.js'],

    //扩展css文件（注：相对路径）

    cssFile: ['sample/Sample.css']

}

上述配置中，menus、jsFile、cssFile 详细说明如下：

参数 类型 描述
menus array 左侧面板展示的 Tabs 标签页数组，系统将根据元素的先后顺序依次从上往下进行显示。
 
数组元素为 object 类型。其中：
id：Tab 页对应面板 dom 的id
title：Tab 页的标题文字
iconClass：Tab 页图标的类名
jsFile array 扩展 Tab 页的 js 文件路径（相对PluginsConfig.js 配置文件）。
cssFile array 扩展 Tab 页的 css 文件路径（相对PluginsConfig.js 配置文件）。

注意：

  1. 扩展多个 Tabs 标签页时，对象 DataViz.Plugins.DatavizPlugins 只允许实例化一次。
  2. 步骤 3 中 menus 配置的扩展项 id 需与 js 文件中定义的 id一致。

定制数据上图Logo跳转链接

  1. 在配置文件PluginsConfig.js中，定制数据上图 Logo 的跳转链接，如下粗体代码所示：

window.DataViz.Plugins = {

    // 默认点击左上角logo，打开iPortal首页

    logoHref: "",

    // 默认点击左上角logo，打开新的浏览器标签

    logoHrefTargetSelf: false,

    //左侧需要显示的 Tabs 标签页

    menus: [{

        id: 'dv-layers',

        title: DataViz.Language.layerManagement,

        iconClass: 'supermapol-icons-layers'

    },{

        id: 'dv-settings',

        title: DataViz.Language.mapSetting,

        iconClass: 'supermapol-icons-setting'

    }

    ]

}

 上述配置中，logoHref、logoHrefTargetSelf详细说明如下：

参数 类型 描述
logoHref String 数据上图 Logo 所对应的链接地址，为空则为 iPortal 首页。
logoHrefTargetSelf boolean 点击 Logo 后，是否在当前浏览器窗口打开链接地址。

定制点线符号集

定制点符号集

  1. 在配置文件symbol-point.json中，添加点符号集Tab标签页。symbol-point.json中提供了默认的标签页结构示例，如下代码所示，您可以在已有的标签页中新增点符号，也可自定义新的标签页。

{

  "Vector": {

  },

  "Image": {

  }

}

  1. 在Tab标签页中添加自定义符号，即在步骤1中添加如下粗体代码。

支持扩展定制矢量（Vector）与图片（Image）两种类型的点符号。矢量点符号支持可在线访问或相对地址(如static/imgs/layer_editor/point_imgs_v1/xxx.svg)的svg格式。图片点符号支持可在线访问或相对地址(如static/imgs/layer_editor/point_imgs_v1/xxx.png)的png/jpg/jpeg格式。

{

  "Vector": {

    //矢量点符号扩展示范

    "自定义矢量1": [

      "http://fakeurl:8081/demo/test1.svg",

      "http://fakeurl:8081/demo/test2.svg",

    ]

  },

  "Image": {

    //图片点符号扩展示范

    "自定义图片1": [

      "http://fakeurl:8081/demo/bigimgs/biji.png",

      "http://fakeurl:8081/demo/bigimgs/biaoqian.png",

    ]

  }

}

定制线符号集

  1. 在配置文件symbol-line.json中，添加线符号集Tab标签页。symbol-line.json中提供了与交通相关的标签页示例，如下代码所示。

{

"traffic": {

    "label": "交通", // 线符号集在标签页中的显示名称

"items": [] // 标签页下的自定义线符号

}

  1. symbol-line.json中提供了与交通相关的标签页示例，如下代码所示在您新增标签页下的“items”中扩展自定义线符号，定义每个线符号的id、label、thumbnail、styleConfigs和styles等参数，如下粗体代码所示。

{

  "traffic": {

    "label": "交通", // 线符号集在标签页中的显示名称

    "items": [ // 标签页下的自定义线符号

      {

        "id": "ordinaryRail", // 线符号的唯一 id

        "label": "普通铁路", // 线符号的标题

        "thumbnail": "static/imgs/layer_editor/lineType/dark/普通铁路.svg", // 线符号的缩略图地址，可为相对 static目录或在线地址

        // styleConfigs 用于配置渲染界面或其他配置，数据格式为对象数组，与 styles 一一对应

        "styleConfigs": [

          {

            "strokeColor": {

              "label": "间隔线颜色1", // 配置项的显示名称

              "controlType": "color" // 配置项的控件类型

            },

            "strokeWidth": {

              "label": "间隔线宽度1",

              "controlType": "number"

            },

            "strokeOpacity": {

              "label": "间隔线不透明度1",

              "controlType": "percent"

            },

            "lineCap": {

              "label": "间隔线线端点样式1",

              "controlType": "select"

            }

          },

          {

            "strokeColor": {

              "label": "间隔线颜色2",

              "controlType": "color"

            },

            "strokeWidth": {

              "label": "间隔线宽度2",

              "controlType": "number"

            },

            "strokeOpacity": {

              "label": "间隔线不透明度2",

              "controlType": "percent"

            }

          }

        ],

        // styles 暂时只支持对 strokeColor strokeWidth strokeOpacity lineCap lineJoin 属性进行配置

        "styles": [

          {

            "strokeColor": "#BFBFBF", // 线颜色配置

            "strokeWidth": 4.16, // 线宽度配置 单位为像素

            "strokeOpacity": 1, // 线透明度配置

            "lineCap": "round" // 线端头样式配置，可选值为 round，butt，square

          },

          {

            "strokeColor": "#ffffff",

            "strokeWidth": 3,

            "lineDash": [13.23, 13.23], // 虚实线配置 单位为像素

            "strokeOpacity": 1,

            "lineJoin": "round" //连接线配置，可选值为 round, butt, or square

          }

        ]

      }

    ]

  }

}

 

完成扩展定制后，参照您进行的扩展定制项目，按需将扩展代码（js、css 文件）及修改后的配置文件（PluginsConfig.js、symbol-point.json、symbol-line.json）拷贝到【iPortal 产品包 】/webapps/iportal/apps/dataviz/libs/plugins/ 下（若没有需要新建），或重新压缩到 【iPortal 产品包】/webapps/iportal/WEB-INF/lib/webjar-dataviz-*.jar 中（位置：/META-INF/resources/apps/dataviz/libs/plugin/）。若两个位置均放置了扩展文件，系统将以前者为准。

不同扩展定制项目涉及到的文件：

将扩展文件放置完毕后，在浏览器中访问 iPortal，进入数据上图 WebApp，查看扩展效果（无需重启 iPortal，若未看到扩展效果，请删除浏览器缓存再访问）。其中，点线符号集的扩展效果可分别在点图层和线图层的图层面板中的“基本”选项卡下的“点样式”和“线样式”中查看。