数据上图 WebApp 扩展示例

上节介绍了数据上图 WebApp 的扩展定制流程，本节将以扩展一个 Tab 标签页，并实现在扩展的 Tab 标签页中添加瓦片图层为例详细介绍扩展开发。

第一步：新建扩展 Tab 对应的 js、css 文件，并实现添加瓦片图层功能。

1. 新建 Sample.js，添加如下立即执行函数：

!function() {

}()

2. 实例化 DataViz.Plugins.DatavizPlugins，即在步骤 1 中添加如下粗体代码：

!function() {

    let plugins = new DataViz.Plugins.DatavizPlugins({

        changeTabCallback: changeMenuTab

    });

}()

其中，changeMenuTab 是切换到扩展 Tab 页对应的回调函数。

3. 在 changeMenuTab 回调函数中实现功能：1）点击“添加瓦片图层”按钮，可在右侧地图上添加一幅 iServer 示范地图 ChinaDark（http://localhost:8090/iserver/services/map-china400/rest/maps/ChinaDark）；2）点击“删除图层”按钮，可将已添加的 ChinaDark 从地图上移除。

代码如下所示：

function changeMenuTab(id) {

        if(id !== 'dv-extension') return;

        let parent = document.getElementById(id);

        if(!parent) return;

        let addTileBtn = createButton('添加瓦片图层');

        parent.append(addTileBtn);

        addTileBtn.onclick = function() {

            let url = "http://192.168.112.201:8090/iserver/services/map-china400/rest/maps/ChinaDark",

                layerInfo = {

                    id: 11,

                    name: 'ChinaDark'

                }

            //添加瓦片图层接口    

            plugins.addTileLayer(layerInfo, url, null,

            addLayerCallback);    

        }

        let deleteBtn = createButton('删除图层');

        parent.append(deleteBtn);

        deleteBtn.onclick = () => {

            //删除图层接口

            plugins.removeLayerById(11);   

        }

}

上述代码中 addTileLayer 接口用法，详见：addTileLayer。

addLayerCallback 回调函数实现如下：

function addLayerCallback(result) {

        //回调函数，如果成功不会返回值，如果错误会返回{error: 错误原因}

        if(result) {

            alert("添加失败")

        } else {

            alert("添加成功");

        }

}

createButton 函数实现如下：

function createButton(value) {

        let button = document.createElement('div');

        button.innerHTML = value;

        button.setAttribute('class', 'testButton');

        return button;

}

4. 新建 Sample.css 文件，设置扩展 Tab 面板的左外边距、步骤 3 中按钮的样式。代码如下：

#dv-extension div {

    margin-left: 0px;

}

.testButton {

    width: 150px;

    height: 30px;

    background-color: #0081E2;

    color: #fff;

    border-radius: 4px;

    margin-top: 10px;

    line-height: 26px;

    text-align: center;

    cursor: pointer;

}

至此，扩展 Tab 标签页的代码均已完成。

第二步：配置第一步实现的 Tab 相关的 js、css 文件。具体配置，详见：扩展定制流程-步骤3

第三步：拷贝扩展 Tab 相关的资源文件到指定位置。

参照扩展定制流程-步骤4，将 Sample.js、Sample.css、PluginsConfig.js 拷贝到路径：【iPortal 产品包】/webapps/iportal/apps/dataviz/libs/plugins/ 下（若没有需要新建），结构如下所示：

第四步：在浏览器中打开数据上图 WebApp，查看扩展开发效果。

在浏览器中访问 iPortal，登录后，在导航栏“应用中心”的下拉菜单中点击“数据上图”，在打开的页面中点击新扩展的“扩展”Tab 页，即可看到面板中添加的添加/删除图层按钮，如下图所示。点击“添加瓦片图层”按钮，即可将 ChinaDark 图层添加到地图上。

注：更多接口使用示例，请在【iPortal 产品包】/webapps/iportal/WEB-INF/lib/ 下找到并解压 webjar-dataviz-*.jar 后，查阅解压目录下 /META-INF/resources/apps/dataviz/libs/plugins/sample/Sample.js 文件。