示例2：自定义添加“电子地图”组件

发送反馈

如果 iPortal 的默认首页内容不能满足您的业务需求，那么您可以通过 iPortal 的可视化布局系统添加自定义的 UI 组件，进行简单的深度定制。自定义 UI 组件有两种编辑模式，这里我们为您介绍一个使用源代码编辑模式的示例—自定义添加“电子地图”组件，即：您可以在门户首页浏览超图云地图，进行放大、缩小等操作。

针对实现源码较为复杂的情况，建议您将该组件的 UI 写成标准的 HTML 页面，再在自定义组件代码编辑器中通过 iFrame 标签引入，支持直接引入该页面，也支持引入发布后的组件服务。本示例具体步骤如下：

第一步：本示例中，使用的是通过 SuperMap iClient 8C(2017) for JavaScript 编写的“电子地图”组件，编写步骤请参见：使用 iClient for JavaScript 入门，新建的“index.html“的 HTML 页面内容如下：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>   
<title>SuperMap iClient JavaScript:TiledDynamicRESTLayer</title>
<!--引用需要的脚本-->
  <script src="./libs/SuperMap.Include.js"></script>
  <script type="text/javascript">
      var map, layer;
    function init(){
        map = new SuperMap.Map("map", { controls:[
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions:{
                    enableKinetic:true
                }
            })]
        });
        layer = new SuperMap.Layer.CloudLayer();
        map.addLayers([layer]);
        map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 4);
    }
    </script>
</head>
  <body onload="init()" style="margin:0;"> 
<!--地图显示的div-->
     <b style="font-size: 20px;font-color: #242424;font-weight: 700;font-family:'Microsoft Yahei',sans-serif;margin-bottom: 21px;margin-top: 7px;display: block;">电子地图</b>
     <div id="map" 
 style="position:absolute;left:10px;right:10px;width:100%;height:80%;border:2px;" 
 >             
     </div>    
</body>
</html>

第二步：将第一步中创建的 index.html 文件以及 SuperMap iClient 8C(2017) for JavaScript 中的库文件：libs 和 theme 文件夹一起放到名为 map 的文件夹中，然后将 map 文件夹放到【SuperMap iPortal 安装目录】\webapps 目录下，打开浏览器即可访问该电子地图服务：http://192.168.13.217:8090/map/index.html

第三步：进入可视化布局系统，进行 UI 组件的布局。本示例中，为了布局美观，将”最新服务组件”与新添加的”自定义组件“放在同一行。在“布局组件”选项中，选择自定义布局组件，在”自定义“输入框中输入（5 1 5 1），数字之间有空格（当所有数字之和为 12 时，该组件方可使用）。输入完成后，在输入框右侧会出现”拖动“按钮，鼠标左键点击”拖动“按钮，按住不放，将自定义的布局组件拖动到右侧的布局容器中。

第四步：页面布局好后，接下来需要将 UI 组件中的”最新服务组件“拖动到了布局组件的第一列，然后将 UI 组件中的”自定义组件“拖动到布局组件的第三列中（其中，第二列和第四列作为留白，您也可以根据自身需求来调整布局），点击自定义组件的”编辑“按钮，在自定义组件代码编辑器中，选择“源代码”编辑按钮，在代码输入框中输入以下代码：

<iframe src="http://192.168.13.217:8090/map/index.html" scrolling="no" frameborder="0" height="313px" width="100%">
</iframe>

其中，<iframe> 标签参数说明如下：

第五步：点击”发布“按钮，即可查看添加”电子地图“组件后的门户首页效果