"source code" edit button, input the following codes in the code input box, :
Example 2: Add a customized "electronic map" component |
If the default home page content of iPortal can not meet your business needs, you can add customized UI components through the visual system layout of iPortal, to easily and heavily customize. Custom UI components have two kinds of edit modes, here we introduce you to a demo using source code edit mode - customizing to add "electronic map" components, namely: you can browse map in portal home page map, to zoom in and out, etc.
Aiming at the condition in which the implementation of source code is more complicated, it is recommended that you write the UI of the components of as standard HTML page, and then introduce it through the iFrame tag in a custom component code editor, supporting directly introducing the page, also supporting introducing published component services. The specific steps of this demo are as follows:
Access any of the following open source community to get the SuperMap iClient for Javascript sourcecode:
Create a new folder in local disk, here we named as "map"; In the "map" folder, create a "index.html page with a text editor (such as NotePad++) . And save the html to UTF-8 encoding. Add the following codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>electronic map</title>
<link rel="stylesheet"
href="libs/leaflet/leaflet.css">
</head>
<body style=" margin: 0;">
<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;">electronic map</b>
<div id="map" style="position:absolute;left:10px;right:10px;width:100%;height:80%;border:2px;"></div>
<script type="text/javascript" src="libs/leaflet/leaflet.js"></script>
<script type="text/javascript" src="dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">
var map = L.map('map', {
center:
[39.92, 116.46],
crs:
L.CRS.EPSG3857,
zoom:
6
});
L.supermap.cloudTileLayer("http://t2.supermapcloud.com/FileService/image").addTo(map);
</script>
</body>
</html>
Step 3: Putting the index.html file created in the first step and libs and dist folders of SuperMap iClient JavaScript library file together into the folder named map, then putting the map folder into [SuperMap iPortal installation directory ]\webapps directory, starting SuperMap iPortal service, opening the browser to visit the electronic map service: http://192.168.13.217:8090/map/index.html
Step 4: Entering the visual layout system, to layout the UI components. In this demo, for beautiful layout, putting the "the latest service components" and the newly added "custom components" on the same line. In the " layout components" tab, selecting to customize layout components, in the "custom" input box input (5 1 5 1), there are spaces between numbers (when the sum of all numbers is 12, the component can be used). After inputting is completed, a "drag" button will appear on the right side of the input box, clicking on the "drag" button with the left key of mouse, holding down, dragging the layout of the customized components to the layout container on the right side.
Step 5: After page layout is completed, next users need to drag the "latest service component" of UI components to the first column of layout components, and then drag "custom components" of the UI components to the third column of layout components (among them, the second column and the fourth column are as white space, you can also adjust the layout according to your own needs), click on the "edit" button of custom components, in the custom component code editor, select "source code" edit button, input the following codes in the code input box, :
<iframe src="http://192.168.13.217:8090/map/index.html" scrolling="no" frameborder="0" height="313px" width="100%"> </iframe>
In which, the introcution of <iframe> label parameters are as follows:
Step 6: Clicking on the "publish" button, to view the portal home page adding "electronic maps" components
