Use iClient for OpenLayers to browse a map in iPortal

The common flow to use iClient for OpenLayers to develop is:

1. Retrieve OpenLayers, SuperMap iClient for OpenLayers;

2. Import js and css files;

3. In the js code, use the interfaces provided by the libraries to complete the function coding;

4. Finally, check the running effect in a browser.

iClient for OpenLayers supports importing library files from online CDN, supports using npm command to install libraries for modular development. This example only uses retrieving the library (v10.1.0 full package) to the local machine to show how to use iClient for OpenLayers to access a map in iPortal. The corresponding online address of this example is: https://iclient.supermap.io/examples/openlayers/editor.html#iportalWebMap

Step 1: Download and extract the library file

Download address: https://iclient.supermap.io/download/download.html

Package directory structure:

Figure 1. SuperMap iClient JavaScript package directory structure

Step 2: Import the js, css library files

Create a folder 'MyFirst', copy 'dist' and 'libs' folder in the extracted package to the newly created folder 'MyFirst'. Because include-ol.js request files from 'dist' and 'libs' folder through the relative path '../../dist' and '../../libs', you need to copy 'dist' and 'libs' folder again to the directory two levels above the 'MyFirst' folder.

Then in the 'MyFirst' folder, create an HTML page 'iportalWebMap.html' with a text editor you like (Note: the file coding should be UTF-8), and insert the code below in the <head> tag pair:

Note: Please check and ensure the reference file path above is correct.

Step 3: Edit the HTML file to implement the map accessing function

In the <body>, write the following code:

new ol.supermap.WebMap(491609698, {

target:'map',

server:'https://iportal.supermap.io/iportal'});

</script>

</body>

The code above implements accessing the map whose id is 491609698 on the online site: https://iportal.supermap.io/iportal （Map details).

Step 4: Browse the map in the browser

Open the finished iportalWebMap.html in a browser, you can see the running effect as shown below.

Step 5: Publish your Web GIS project. When all the functions of your project are developed, you can publish your project to middleware such as Tomcat, to access using the HTTP protocol. While the specific process is not the focus of this demonstration, please check the relevant material by yourself.