Conveniently Build A Simple GIS Application Platform


If you want to quickly build a GIS server and create a simple platform to realize GIS information display, query and other functions, you can purchaseCloud Host as your server, combined with Cloud Analysis API and Cloud Storage API services for secondary development.

If you want to quickly have GIS service capabilities without building a GIS server, SuperMap Online provides a way of renting and buying a dedicated GIS server. Based on Cloud Storage, you can upload data and publish services conveniently. At the same time combined with the Cloud Analysis API and Cloud Storage API services for secondary development.

This example will lead you: upload data in Cloud Storage, publish the data as a REST map service and set it to be public, then call it on your webpage. The sample data is the map of Beijing and Tianjin, click to download the sample data.

Call REST service in your webpage

Step1 Upload data and publish service

Open SuperMap Online, click "Resource Center","Data",then click "Upload Data" on the data page. On the upload data page, select the data type as "SuperMap Workspace Data", select the upload file and click "Next", then select the service type as "REST Map Service". Finally, click "Upload and Publish".

Step2 Set the REST map service as public and copy the service address

Click the "Share","Enable Sharing" in turn, select "Enable Sharing", "Public Download", and click "Save". Return to data page, click the published service link, click "maps" on the pop-up page, select "Beijing-Tianjin area map" and copy the current webpage address. The service address of this example is: https://www.supermapol.com/proxy/iserver/services/map_jingjin_nv35yfs1/rest/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE

Step3 Build a web page and call map server

You can call the REST service for secondary development. Take SuperMap iClient for OpenLayer as an example, enter the following sample code to call the REST map service on your webpage.

<!DOCTYPE html>
<html>
//Introduce 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 the 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 = "http://192.168.56.1:8195/portalproxy/iserver/services/map_jingjin_r0oohttps://www.supermapol.com/proxy/iserver/services/map_jingjin_nv35yfs1/rest/maps/Jingjin area map"; Here is the address of the REST map service you called.
    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, then call your REST map service. In addition, you can directly call the map that made in DataViz, or call the REST data service to implement data query and other functions, click to learn more about how to call REST services.