Cloud Storage API
SuperMap Online cloud storage provides you with cloud storage data services, which not only supports you to upload, store and publish data, but also helps you to call REST services conveniently and quickly by using Map API、Data API and Spatial Analysis API service. You do not need to buy, install, and maintain a GIS server by yourself, effectively saving you development costs and shortening the development cycle. We provide you with 10,000 visits per day of hosted data services, and you can also upgrade your access rights through Purchase Cloud Storage.
This article is mainly based on SuperMap iClient JavaScript 10i(2020) for OpenLayers to give you an example of how to call a REST service on a web page. You can also click to learn more.
What needs to be noted during the call is:
When calling the REST map service, the URL address needs to display the current map name. For example, the current map name is "mapOfolpg4", and the URL address when you call it should be: https://www.supermapol.com/proxy/iserver/services/map_beijingshizhuzhaixiaoqu_plnzee0n/rest/maps/mapOfolpg4 If you need to call a REST data service, the URL address only needs to display the root node (data) of the data service, such as: https://www.supermapol.com/proxy/iserver/services/data-world/rest/data.
SuperMap Online provides you with a variety of APIs to support you to call maps or services. You can:
- Call the map you made in the DataViz on the web page
- Call REST map service in webpage
- Call REST data service in webpage
- Call REST spatial analysis service in webpage
Map API
Call the Map You Made in DataViz on your webpage
If you have made a map in DataViz, and set the map and the data that used in map as public , you can use the following code to call and display your map on the web page. Click to learn more.
<!DOCTYPE html>
<html>
//Import script
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js">
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
</head>
//Insert map
<body style=" margin: 10px;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
</div>
<script type="text/javascript">
new ol.supermap.WebMap(1945334393);//The number here is the ID generated by the public map you made. This example is Shandong _ county level administrative zoning map
</script>
</body>
</html>
Call REST Map service in Web Page
If you upload data in cloud storage and publish it as a REST map service, and set the data and service as public , you can use the following code call the REST map service to display the map on a Web page. Click to learn more about how to call the map.
The sample code is as follows:
<!DOCTYPE html>
<html>
//Import script
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
</head>
//Insert map
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, url = "https://www.supermapol.com/proxy/iserver/services/map_beijingshizhuzhaixiaoqu_plnzee0n/rest/maps/mapOfolpg4";Here is the address of the REST mapping service that you invoked.
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [0, 0],
zoom: 2,
projection: 'EPSG:4326',
multiWorld: true
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: url,
wrapX: true
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
map.addControl(new ol.supermap.control.ScaleLine());
</script>
</body>
</html>
If you do not want to set your service as public, you need to apply for key first, and then call your REST data service, click to learn more about how to call the map.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, url = "https://www.supermapol.com/proxy/iserver/services/map_beijingshizhuzhaixiaoqu_plnzee0n/rest/maps/mapOfolpg4";//Here is the address of the REST mapping service that you invoked.
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [0, 0],
zoom: 2,
projection: 'EPSG:4326',
multiWorld: true
})
});
SuperMap.SecurityManager.registerKey(url,'GY9Ms8eBw4MLpIoXHjTC8Mzx');//This needs to be replaced with the secret key that you requested for the service.
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: url,
wrapX: true,
serverType:'ONLINE'//You need to define the "Type" when using the Key of SuperMap Online application.
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
map.addControl(new ol.supermap.control.ScaleLine());
</script>
</body>
</html>
Data API
Call REST Data Service in Webpage
If you upload data in cloud storage and publish it as a REST data service, and set both the data and service as public, you can implement the Rectangular Range Query Function. Click to learn more about the functions that can be implemented by calling data services.
The sample code of the range query function is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_getFeatureByIDs"></title>
<script type="text/javascript" src="https://iclient.supermap.io/examples/js/include-web.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/include-ol.js"></script>
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, vectorLayer, resultLayer,
baseUrl = "https://www.supermapol.com/proxy/l2avopwc/iserver/services/map-world/rest/maps/World",//Here is the address of the REST map service that you invoked.
url ="https://www.supermapol.com/proxy/iserver/services/data-world/rest/data";//Here is the address of the REST data service that you invoked.
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [-10, 15],
zoom: 3,
projection: 'EPSG:4326',
multiWorld: true
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: baseUrl,
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
query();
function query() {
//Add a query area
var polygon = new ol.geom.Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
var polygonSource = new ol.source.Vector({
features: [new ol.Feature(polygon)],
wrapX: false
});
vectorLayer = new ol.layer.Vector({
source: polygonSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
});
map.addLayer(vectorLayer);
//Create the Bounds query service
var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
datasetNames: ["World:Capitals"],
bounds: polygon.getExtent(),
});
new ol.supermap.FeatureService(url).getFeaturesByBounds(boundsParam, function (serviceResult) {
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
wrapX: false,
});
resultLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(resultLayer);
});
}
</script>
</body>
</html>
If you don’t want to make your service as public, you need to apply for key first, and then implement the rectangular range query function by calling the data service. Click to learn more about the functions that can be implemented by calling data services.
The sample code of the range query function is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_getFeatureByIDs"></title>
<script type="text/javascript" src="https://iclient.supermap.io/examples/js/include-web.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/include-ol.js"></script>
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, vectorLayer, resultLayer,
baseUrl = "https://www.supermapol.com/proxy/l2avopwc/iserver/services/map-world/rest/maps/World",//Here is the address of the REST map service that you publish.
url ="https://www.supermapol.com/proxy/iserver/services/data-world/rest/data";//Here is the address of the REST data service that you publish.
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [-10, 15],
zoom: 3,
projection: 'EPSG:4326',
multiWorld: true
})
});
SuperMap.SecurityManager.registerKey(baseUrl,'GY9Ms8eBw4MLpIoXHjTC8Mzx');//This needs to be replaced with the secret key that you requested for the service.
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: baseUrl,
serverType:'ONLINE'//You need to define the "Type" when using the Key of SuperMap Online application.
}),
projection: 'EPSG:4326'
});
map.addLayer(layer);
query();
function query() {
//Add a query area
var polygon = new ol.geom.Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
var polygonSource = new ol.source.Vector({
features: [new ol.Feature(polygon)],
wrapX: false
});
vectorLayer = new ol.layer.Vector({
source: polygonSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
});
map.addLayer(vectorLayer);
//Create the Bounds query service
var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
datasetNames: ["World:Capitals"],
bounds: polygon.getExtent()
});
SuperMap.SecurityManager.registerKey(url,'GY9Ms8eBw4MLpIoXHjTC8Mzx');//You need to replace this with the secret key you requested for the service.
new ol.supermap.FeatureService(url,{serverType:'ONLINE'}).getFeaturesByBounds(boundsParam, function (serviceResult)//You need to define the "Type" when using the Key of SuperMap Online application
{
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
wrapX: false
});
resultLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(resultLayer);
});
}
</script>
</body>
</html>
Spatial Analysis API
Call REST Spatial Analysis Service in Webpage
If you upload data in cloud storage and publish it as a REST spatial analysis service, and at the same time set the data and service to public, this example is to call the spatial analysis service to implement buffer analysis function. Click to learn more about the functions that can be achieved by calling the spatial analysis service.
The sample code of the buffer analysis function is as follows, click to view the online example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
<link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/examples/js/widgets.js"></script>
<title>缓冲区分析</title>.
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, vectorBuffer, vectorSource, resultLayer, features, cour,
dataService = "https://www.supermapol.com/proxy/iserver/services/data_beijingshisanjizongheyiyuan_t0sgqkly/rest/data",
spatialanalystService = "https://www.supermapol.com/proxy/iserver/services/spatialanalyst_beijingshisanjizongheyiyuan_y3c93ow3/restjsr/spatialanalyst",
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsed: false
}
})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [116.35, 39.89],
zoom: 10,
projection: "EPSG:4326",
multiWorld: true
}),
layers: [new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'vec',
key: "1d109683f4d84198e37a38c442d68311",
projection: "EPSG:4326"
})
}), new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'vec',
key: "1d109683f4d84198e37a38c442d68311",
isLabel: true,
projection: "EPSG:4326"
})
})]
});
loadLayer();
initFeature();
bufferAnalystProcess();
function loadLayer() {
<!--add result layer-->
vectorSource = new ol.source.Vector({
wrapX: false
});
resultLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(resultLayer);
}
function initFeature() {
widgets.alert.clearAlert();
var featureService = new ol.supermap.FeatureService(dataService);
var getFeatureParams = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "datasetcsv_208277268@olpg6",
orderBy: "SMID desc"
},
datasetNames: ["olpg6:datasetcsv_208277268"],
fromIndex: 0,
toIndex: 999999
});
featureService.getFeaturesBySQL(getFeatureParams, function(serviceResult) {
features = (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features);
for (var i = 0; i < features.length; i++) {
features[i].setStyle(new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.9],
src: 'https://www.supermapol.com/developer/examples/img/hospital.png'
}))
}));
}
if (vectorSource.getFeatures().length > 0) {
vectorSource.clear();
}
vectorSource.addFeatures(features);
});
}
<!--buffer analysis-->
function bufferAnalystProcess() {
var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
dataset: "datasetcsv_208277268@olpg6",
bufferSetting: new SuperMap.BufferSetting({
endType: SuperMap.BufferEndType.ROUND,
leftDistance: {
value: 1000
},
rightDistance: {
value: 1000
},
semicircleLineSegment: 50,
})
});
new ol.supermap.SpatialAnalystService(spatialanalystService).bufferAnalysis(dsBufferAnalystParameters, function(serviceResult) {
vectorBuffer = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.recordset.features)
});
var resultLayer = new ol.layer.Vector({
source: vectorBuffer,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#92D0FC',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(146,208,252,0.5)'
})
})
});
var layersArray = map.getLayers();
layersArray.insertAt(1, resultLayer);
});
}
</script>
</body>
</html>
If you do not want to make your service public, you need to apply for key first, and then implement the buffer analysis function by calling the spatial analysis service. Click to learn more about the functions that can be achieved by calling the spatial analysis service.
The sample code of the buffer analysis function is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
<link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/examples/js/widgets.js"></script>
<title>缓冲区分析</title>.
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var map, vectorBuffer, vectorSource, resultLayer, features, cour,
dataService = "https://www.supermapol.com/proxy/iserver/services/data_beijingshisanjizongheyiyuan_t0sgqkly/rest/data",
spatialanalystService = "https://www.supermapol.com/proxy/iserver/services/spatialanalyst_beijingshisanjizongheyiyuan_y3c93ow3/restjsr/spatialanalyst",
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsed: false
}
})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [116.35, 39.89],
zoom: 10,
projection: "EPSG:4326",
multiWorld: true
}),
layers: [new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'vec',
key: "1d109683f4d84198e37a38c442d68311",
projection: "EPSG:4326"
})
}), new ol.layer.Tile({
source: new ol.source.Tianditu({
layerType: 'vec',
key: "1d109683f4d84198e37a38c442d68311",
isLabel: true,
projection: "EPSG:4326"
})
})]
});
loadLayer();
initFeature();
bufferAnalystProcess();
function loadLayer() {
<!--add result layer-->
vectorSource = new ol.source.Vector({
wrapX: false
});
resultLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(resultLayer);
}
function initFeature() {
widgets.alert.clearAlert();
SuperMap.SecurityManager.registerKey(dataService, 'MqorbBSybznz2wEv0K8pOpE9');
var featureService = new ol.supermap.FeatureService(dataService, {
serverType: 'ONLINE'
});
var getFeatureParams = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "datasetcsv_208277268@olpg6",
orderBy: "SMID desc"
},
datasetNames: ["olpg6:datasetcsv_208277268"],
fromIndex: 0,
toIndex: 999999
});
featureService.getFeaturesBySQL(getFeatureParams, function(serviceResult) {
features = (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features);
for (var i = 0; i < features.length; i++) {
features[i].setStyle(new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.9],
src: 'https://www.supermapol.com/developer/examples/img/hospital.png'
}))
}));
}
if (vectorSource.getFeatures().length > 0) {
vectorSource.clear();
}
vectorSource.addFeatures(features);
});
}
<!--buffer analysis-->
function bufferAnalystProcess() {
var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
dataset: "datasetcsv_208277268@olpg6",
bufferSetting: new SuperMap.BufferSetting({
endType: SuperMap.BufferEndType.ROUND,
leftDistance: {
value: 1000
},
rightDistance: {
value: 1000
},
semicircleLineSegment: 50,
})
});
SuperMap.SecurityManager.registerKey(spatialanalystService, 'use the key that you apply for this server at here');
new ol.supermap.SpatialAnalystService(spatialanalystService, {
serverType: 'ONLINE'
}).bufferAnalysis(dsBufferAnalystParameters, function(serviceResult) {
vectorBuffer = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.recordset.features)
});
var resultLayer = new ol.layer.Vector({
source: vectorBuffer,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#92D0FC',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(146,208,252,0.5)'
})
})
});
var layersArray = map.getLayers();
layersArray.insertAt(1, resultLayer);
});
}
</script>
</body>
</html>