Web Development Training

Lecture: Amber Li
P1
 Content

 iServer Introduction
 iPortal Introduction
 iClient for JavaScript Introduction
 iClient 3D For WebGL Introduction

P2
P3
 SuperMap iServer

API

GIS
REST

GIS Server
GIS
Application

P4
 Nautical
Map Data Geometric Chart
Service Service Service Service

Spatial OGC Network Bus

3D
Analysis Service Analysis Interchange
Service
Service Service Service

Spatial Data
Third Party Data Catalog
Processing Science
Service Service
Service Service
Strong Functions 10.0.0

High-performance Distributed Streaming

Machine
Geoprocessing
Learning
Analysis Service Data Service
Distributed Service
Service

Stable and Reliable

P5
 GIS Services

Map Services Data Services

Map browsing, zooming, panning Query on datasources and datasets
Map measurement, map query Online editing (addition, deletion and
Thematic mapping modification) on datasets

Spatial Analysis Services Network analysis services

Clip, erase, delete, identity, intersect, union, Optimal path analysis, travelling salesman
update, XOR for geometric objects and datasets analysis, multiple travelling salesmen analysis
Buffer analysis, spatial relation, linear referencing Service area analysis, location-allocation analysis
Extract contour lines Closest facility analysis

P6
 GIS Services

Traffic Transfer Analysis Address Matching Services

Traffic transfer scheme analysis Query places with address keywords,
Bus stop query query places with position information

3D/Network Analysis Services Geometry Services

3D data publishing With no need of map/data services
3D data query Measure area, distance, and transform
Network analysis coordinates

P7
 GIS Services +

Distributed Analysis Services Real-time Data Services

Distributed map visualization Real time data analysis and processing
Distributed cluster based on Spark

Data Catalogue Services Data Stream Services

Indexing data Real time data transfer
Managing data Provide server propagation and client
subscription function based on
WebSocket protocol

P8
 SuperMap iServer Streaming Data Service

SuperMap iServer Streaming Service

Attribute
Desktop

Output
Input
Spatial

Filter Map
Mobile

SuperMap iServer DataStore Web

P9
 Data Streaming Visualization

P10
 SuperMap Big Data GIS + IoT
IoT perception layer

Application Display
iObjects iDesktop iMobile iClient Online

Sensor
Device gateway

Data Analysis
RFID
Steaming Data Service iDataStore Distributed Analysis
Camera Network Service
Card Reader Layer
GPS

P11
 10.0.0
SuperMap iServer Machine Learning Service

Model Training Model Application

SuperMap iServer User Data

SuperMap iDesktopX
Multiple
Iteration Reasoning/Predicting
Data Science
Service Successful Release
Sample Data

P12
 Machine learning service
 Binary Classification
 Land Classification
 Object Detection
 Scene Classification
 Spatial Density Clustering

10.0.0

P13
SuperMap iServer Machine Learning Service
 Service Management Capabilities

P14
 Support Personalized GIS Services - Extension
Development
• Allow to construct industrial service components for
Loosely-coupled
service all service layers
components

• Construct custom business components quickly

Development Kit • Realize dynamic linkage, integration of services layers

• Manage custom services easily

Microkernel
technology

P15
 Product Packages
• SuperMap official website
– https://www.supermap.com/en/html/SuperMap_GIS_ProductPackages.html
• Product Packages
– Install packages：
• SuperMap iServer 10i for Windows (64 bit) (Setup package)
• SuperMap iServer 10i for Windows (32 bit) (Setup package)
– Zip packages：
• SuperMap iServer 10i for Windows (32 bit) (ZIP package)
• SuperMap iServer 10i for Windows (64 bit) (ZIP package)
• SuperMap iServer 10i for Linux (64 bit)
– WAR package：
• SuperMap iServer 10i (war package)
– Deploy packages:
• SuperMap iServer 10i for Windows (64 bit) (deploy package)
• SuperMap iServer 10i or Linux (64 bit) (deploy package)

P16
P17
 Data Viz Data Insights Dashboard Earth

Application Center

Resource Portal Based on SuperMap iPortal

Resource Center User Center

User Role
Searching Integration Management Management Management Sign In

User Organizational Log

Sharing Application Checking Authentication structure Management
Developer GIS Authority
Sorting License Management User Joint Auth2.0
Management

Portal Statistics

P18
 10.0.0

SuperMap iPortal
New Design Based on Modern WebUI

New Portal Homepage New Resource Center New management page

P19
 Adaptive UI for Multi-terminal

• Page layout adaptation for

mobile device

• Interactive adaption for mobile

devices

• Touch screen operation

• No code

P20
 Portal Platform - Out of Box

NO code - Portal Construction NO code - WebApp Construction

P21
 NO Code
Customization

P22
 Multiple Access Control 10.0.0

User Management, Rights Management,

P23 Role Management, Organization Management,…
 WebAPP - Out of Box

DataViz DataInsights

3D Earth MapDashboard
P24
 DataViz：Support Streaming Data and 10.0.0

P25 Migration Map

 Data Insights：Strong Analytical Functions
P26 and Statistic Charts
P27
3D Earth: Cool 3D Visualization
 MapDashboard：New Component Design ,
P28 Creating Applications Quickly
P29 Backend Statistics
 Dashboard Practice

P30
 System Requirements
 Server: Windows/ Windows Server/ Linux SuperMap iPortal & SuperMap
iServer
 PC: Data processing SuperMap iDesktop

P31
32

Data Requirements & Data Preparation

 Daily update of virus in each area

 Administrative Boundary Data (District/ Neighbors)

P32
  Daily update of virus in
each area

 Boundary data

District Neighbors

P33
 Data Visualization - iDesktop

P34
 Data Visualization – iPortal Online Mapping

P35
 Customized Dashbord - Decison Support

P36
 Customized Dashbord - Various of Charts

P37
 Customized Dashbord – Connect to Web Service

1. Put Test.Json file in iserver-webapps-iserver

2. Start iServer, go to http://localhost:8090/iserver/test.json to check the web service.
3. Strat iPortal, go to dashbord, put the url in the box.
P38
P39
P40
 SuperMap iClient for JavaScript Introduction

Map Data
libraries visualization

SuperMap
iClient for
JavaScript

OpenLayers Leaflet MapboxGL Classic

P41
 SuperMap iClient for JavaScript Introduction

Map JS map libraries  Viz JS visualization libraries

• OpenLayers3/4
• H5 – WebGL • Data driven visualization library
• Vector Layers • High community activity
• MapBox GL JS already has example cases

• Lightweight & mobile-friendly

• practical examples are abundant, and
application experience in the
community is rich
• Intuitive, vivid, interactive chart library
MapBox GL JS • Many simple but cool map visualization examples are
• WebGL provided in the version 3.0
• Vector Tiles
MapV
• MapBox Styles
• An opensource library for big data visualization based
• OpenLayers2 on Baidu Map

P42
 OpenLayers

Polymaps

P43
WebGIS？
 How to select map libraries
Map base libraries and corresponding open source libraries

Indicator for Leaflet for OpenLayers for MapBoxGL iClient Classic

Leaflet OpenLayers 3/4 MapBoxGL OpenLayers 2

Whether closed-source risk exists No No No No

Abundant lightweight Display effects of Large user base,

Advantages HTML5OL-Cesium
plugins MVT vector tiles high stability
3857 coordinate
Framework out of
Disadvantages Plugin stability Less heavy plugin system supported
date
only
Performance High Medium High Low
Stability High Medium Medium High
Extensibility Perfect Good Bad Good
Community activity Stars 19,763 2,988 2,275 1,487
Software maturity High Medium Medium General
Community ecological chain Perfect Good Starting stage Good
Learning cost Medium High Medium High
P44
 OpenLayers

Visualization
WebGIS？ libraries?
P45
 iClient For JavaScript Getting Started
—Leaflet
• Publish GIS data through the internet as a service and browse
the service at the client side

Note: “SuperMap iClient for JavaScript” is abbreviated as “JS” in the course

P46
 System Target
• Publish a web system
– Functions: Browse a map

P47
 Steps

Develop
Prepare Web
GIS data system

Create Publish
iServer Web
service system
P48
 Step 1: Prepare GIS Data
• Prepare GIS data with SuperMap iDesktop
– Map: World

Note: Sample data of iServer-- China.smwu is used in this course

P49
 Step 2: Create iServer Service
• Contents

Start server
• A map service • Tool :
needs to be Webmanager
published to •Run startup.bat • Publish the
realize the map under the bin service in a facet
browsing function folder of iServer way
directory
Determine Create iServer
service type service

P50
 Step 2: Create iServer Service
• Start iServer
– Method 1: Run startup.bat under the bin folder
– Method 2: Start > Programs > SuperMap > SuperMap iServer > Start
iServer Service

P51
 Step 2: Create iServer Service
• http://localhost:8090/iserver/manager/

P52
 Step 2: Test iServer Service
• Open Web browser
– Map service address: http://localhost:8090/iserver/services/map-
China/rest/maps/China

P53
 Step 3: Develop Web System
• Development Tool—SuperMap iClient
– Libraries for the client GIS development tool
– Acquire iServer services
– Development tool for Web systems
• SuperMap iClient Location
– [iServer installation directory]/iClient directory
• This example employes SuperMap iClient for JavaScript
– SuperMap iClient for JavaScript product package
– [iServer installation directory]/iclient/forJavaScript
P54
 Step 3: Copy Script Library Files
• Create the GettingStarted folder
• Copy script library files to the new folder
– dist folder – Core library files for development frameworks
– libs folder – Third-party technology libraries (under web folder)

P55
 Step 3: Create an HMTL Page

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>SuperMap iClient for JavaScript</title>
</head>

<body >

</body>
</html>

P56
 Step 3: Add Script Library Reference

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>SuperMap iClient for JavaScript</title>
<script src="dist/include-leaflet.js"></script>
</head>
<body>
</body>
</html>

P57
 Step 3: Add DIV for Map Control

<html>
……
<body onload=onPageLoad()>
<div id="map" style="width:800px;height:500px;">
</div>
</body>
</html>

P58
 Step 3: Create map object and set properties such
as center, scale, etc.
<head>
……
<script type="text/javascript">
var map,layer,
// Set GIS service address for browsing
url = "http://localhost:8090/iserver/services/map-China/rest/maps/China";
function onPageLoad() {
// Cerate map object
map=L.map("mapDiv",{center:[0,0],maxZoom:18,zoom:2,crs:L.CRS.EPSG3857}
}
</script>
</head>

P59
 Step 3: Add iServer layer to Map
<head>
……
<script type="text/javascript">
var map,layer,
// Set GIS service address for browsing
url = "http://localhost:8090/iserver/services/map-China/rest/maps/China";
function onPageLoad() {
// Create map object

map=L.map("mapDiv",{center:[0,0],maxZoom:18,zoom:2,crs:L.CRS.EPSG3857});
L.supermap.tiledMapLayer(url).addTo(map);
}
</script>
</head>
P60
 Step 4: Publish Web System
• System deployment and debugging (Tomcat)
– Copy the GettingStarted folder to the webapps directory of Tomcat
• Tomcat in SuperMap iServer is employed in this example
• Copy the GettingStarted folder to [SuperMap iServer root directory]/webapps

P61
 Step 4: Publish Web System
• Browse for debugging http://localhost:8090/GettingStarted/

P62
P63
 Plugin-free 3D Client: iClient3D for WebGL

Lightweight

Plugin free
SuperMap iClient3D for WebGL
Easy for
development

Easy for extension

P64
 SuperMap iClient WebGL
Cloud GIS network client development platform for 3D
 Platform Independent

Cloud GIS Network Client

for 3 Dimensional data

visualization and analysis

 Based on Modern Web

Technology

 Integrate Leading Map

Library and Visual Library

 A Superior Practice of Open

P65 Source Products

 iClient for WebGL And Relevant Products

SuperMap SuperMap
SuperMap
iDesktop iClient3D for
iServer, iPortal
(3D Designer) WebGL
Build 3D Scene Publish 3D Service Develop Application

P66
 Product Features

Support multi-source GIS spatial data

Capability of massive data

Overall 3D GIS function

P67
 Multi-source GIS spatial data

Manual
2D Data Modelling Use the devices Others

Vector
Street Location
(parameteri
Topography, Oblique view, & Effects Volume
zation, Max BIM Point Cloud
image, map photography panorama Internet Data Data
symbolizati
, video of things
on

P68
 Type Of Layer
• Topography
• Image
• S3M layer
• KML layer
• Dynamic layer

P69
 Product Features

Support multi-source GIS spatial data

Capability of massive data

Overall 3D GIS function

P70
 Capability of Massive Data
• Support topography and image data at TB level
• Support vector ground features and text label of over 10
million objects
• Support fine city-level models (over 400 sq.km.)
• Support oblique photography data at TB level
• Support loading and display of millions of pipelines
• Support smooth browsing of various scenes in scales of globe,
urban area, neighborhood and indoor area

P71
 Dynamic Layer Efficient and real-time dynamic data

P72
 Dynamic layer ： 8000+ dynamic objects real-time render

P73
 Global topography and image data

P74
 Oblique photography model

P75 Flooding Simulation in Oblique Photogrammetry

 BIM (building information modelling data)

P76
 Point Cloud Data

P77
 Key technologies of WebGL Client performance experience

Spatial 3D Model (S3M) 3D spatial data specification

Provide data specification of massive 3D data in Webapplication

Realize massive online data high-efficiency in transmission,

render and analysis

Forming comprehensive application solution

P78
 Current 3D data standard
Advantages
• standard data format
• support efficient
browsing experience of
massive models

OSGB Disadvantages
• large data redundancy
• big performance costs,
long parse time
• weak in Web support
capability

3D Tiles
P79
 S3M Advantages

Multi source Available with browser

Cross platform
data and mobile device

Data security

Easy Massive data in Web

S3M transmission condition

Easy Parse
Instantiation/batch Batch modify the visibility of
LOD
drawing multiple objects
Efficient
Render
Object efficient Discrete Color modification of multiple
selection and query Modelling objects

P80
 S3M Data Supports
Oblique
BIM Point Cloud Fine Model
Photography

Underground Point , Line and

3D Field Water Surface
Pipeline Polygon

P81
 Promote the interaction between 3D data

OSGB S3M 3D Tiles

P82
 Memory optimization of S3M Layer
• Memory Usage is Reduced by 30%
• Memory Footprint is Reduced by 20%

Video Memory

Before After

P83
 Dynamic

P84
 Dynamic

P85
 Full-featured: Interaction with Server

Front End

Front
Analysis
Analysis 01 02 Analysis 03 End
Parameters
Calculation Display

Server

P86
 Spatial Query: Three Dimensional Buffer

P87
 Three Dimensional Spatial Analysis

P88
 Viewshed Analysis

• Three Dimensional
Object(solid)
• Generate Viewshed
Object
• Generate Non
Viewshed Object
• Return Obstacle
Point Object

P89
 Other functions
• Connect to iServer to get model volume and surface area
• Connect to iServer to get model plane projection
• Connect to iServer to do cut fill
• Connected with RTSP video streaming criterion
• S3M layer supports excavation
• S3M layer supports overlaying images within the specified range
• S3M layer supports setting maximum(minimum) visible height and distance of
layers
• Camera supports rotation around points
• Military Standard
P90
 Abundant Online Resources Accumulation of Product

• Official Website Address:

• http://iclient.supermapol.com/introduction/3dwebgl.html

• Product introduction:
• http://iclient.supermapol.com/en/web/introduction/3dwebgl.html

• Online Example:
• http://iclient.supermapol.com/en/examples/3dwebgl/examples.html

• API Documentation:
• http://support.supermap.com.cn:8090/webgl/Build/Documentation/index.ht
ml

P91
 SuperMap iEarth

SuperMap iEarth
Experience 3D GIS application on browser or
SuperMap iClient3D for WebGL mobile phone without any development

P92
 SuperMap iEarth

http://supermapol.com/earth
P93
 Download Address
https://www.supermap.com/en/html/SuperMap_GIS_ProductPackages.html

P94
 Installation Directory
• Sample Code
– The sources code assists developers to quickly build
applications
• Script Libraries for Development
– Build\Cesium directory
• Index.html
– Home page , which integrates the sample code, class
reference instructions, and technical documents
– Non-plugin WebGL client development kit
introduction

P95
 Preparation before development

P96
 3D Data producing
• Configure appropriate workspace
– Generate cache
– Save workspace

P97
 3D service publishing
• 3D service resolution：
– Service type： REST
– Service address: for example
http://servername:8090/iserver/services/3D-beijing/rest/realspace
– 3D resources included：
• datas – acquires 3D data information and 3D data cache
• scenes –acquires information for all scenes, including the
information for layers in the scene
• symbols – acquires 3D symbol resources

P98
 3D servcie publishing
• url addresses required for non-plugin webGL client
development kit：

P99
 Realization of 3D data loading function
Steps：
1） Includeing a script library
2） Adding container for 3D scene
3） Obtaining 3D scene objects
4） Adding the 3D data to the layer of the scene

P100
 Realization of 3D data loading function
1） Include a script library
– Create a project directory-helloWorld
– Copy Build, examples\js folders of SuperMap iClient 3D for WebGL
to the project directory
– Open the js\main.js file to modify the reference path for Cesium

P101
 Realization of 3D data loading function
• 1） Includeing a script library
– Create HTML file
• Create a HTML file—helloWorld.html in the project directory
– The code is as follows:

P102
 Realization of 3D data loading function
1） Include a script library
– Add references to script libraries

P103
 Realization of 3D data loading function
2） Adding container for 3D scene
– Add DIV element
– Instance a Viewer object

P104
 Realization of 3D data loading function
3） Obtaining 3D scene objects

P105
 Realization of 3D data loading function
4） Adding the 3D data to the layer of the scene
– Interface: scene --3D scene object

url : http://localhost:8090/iserver/services/3D-CBD/rest/realspace/datas/Building@CBD/config

P106
 Realization of 3D data loading function
4） Adding the 3D data to the layer of the scene
– Interface: scene --3D scene object

P107
P108
 Explore Local iCLient for WebGL Samples
1. Start iServer
2. Open url
http://localhost:8090/SuperMap_iClient3D_10i_for_WebGL_EN/index.ht
ml

P109
 Thank you

P110