云存储API


SuperMap Online云存储为您提供云端数据服务,不仅支持您上传、存储和发布数据,也通过提供地图API数据API帮助您方便快捷的调用地图及REST服务。您不再需要自行购买、安装、维护一台GIS服务器,有效为您节约开发成本、缩短开发周期。我们为您提供5,000次/日的托管数据服务访问量,您也可以通过购买升级您的访问权限。

本文主要基于SuperMap iClient JavaScript 10i(2020) for OpenLayers为您举例在网页中调用地图或服务的方法,您也可以点击了解在不同地图基础库中的使用方法。

在调用过程中需要注意的是:
调用REST地图服务时,URL地址需要显示当前地图命名。如,当前地图名为mapOfolpg4,您在调用时URL的地址应为:https://www.supermapol.com/proxy/iserver/services/map_beijingshizhuzhaixiaoqu_plnzee0n/rest/maps/mapOfolpg4
如您需要调用REST数据服务,URL地址仅需显示数据服务的根节点(data),如:https://www.supermapol.com/proxy/iserver/services/data-world/rest/data。

SuperMap Online为您提供多种API支持您调用地图或服务,您可以:

地图API

在您网页中调用您在数据上图中制作的地图

如您已经在数据上图中制作了一幅地图,并且将该地图以及该地图调用到的数据通过共享按钮设置为公开,则可以通过如下代码在网页中调用并展示您的地图。点击了解更多。

<!DOCTYPE html>
<html>
<!--引入脚本-->
<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>
<!--插入地图-->
<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);//此处数字为您制作的公开地图生成的id,本示例为山东_县级行政区划图
</script>
</body>
</html>

在网页中调用REST地图服务

如您在云存储中上传了数据并发布为REST地图服务,并将数据及服务均通过共享按钮设置为公开,则可通过以下代码对在网页中调用您发布的地图服务,展示您的地图内容。点击了解更多地图调用方法。

示例代码如下:

<!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";此处为您调用的的REST地图服务的地址。
    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>

如您不希望将您的服务设置为公开,您需要先申请key,后在网页中调用您的REST数据服务,点击了解更多地图调用方法。

示例代码如下:

<!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";//此处为您调用的的REST地图服务的地址。
    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');//此处需要替换为您针对服务申请的秘钥key

    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true,
            serverType:'ONLINE'//使用SuperMap Online申请的key时需要定义Type
        }),

        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
    map.addControl(new ol.supermap.control.ScaleLine());

</script>
</body>
</html>

数据API

在网页中调用REST数据服务

如您在云存储中上传了数据并发布为REST数据服务,同时将数据及服务均设置为公开,您可以通过调用数据服务实现矩形范围查询功能点击了解更多可通过调用数据服务实现的功能。

范围查询功能示例代码如下:

<!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",//此处为您调用的的REST地图服务的地址。
            url ="https://www.supermapol.com/proxy/iserver/services/data-world/rest/data";//此处为您调用的的REST数据服务的地址。

    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() {
        //添加查询区域
        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);
        //创建集Bounds查询服务
        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>

如您不希望将您的服务设置为公开,需要先申请key,后通过调用数据服务实现矩形范围查询功能点击了解更多可通过调用数据服务实现的功能。

范围查询功能示例代码如下:

<!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",//此处为您发布的REST地图服务地址
            url ="https://www.supermapol.com/proxy/iserver/services/data-world/rest/data";//此处为您发布的REST数据服务地址

    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');//此处需要替换为您针对服务申请的秘钥key
            var layer = new ol.layer.Tile({
                source: new ol.source.TileSuperMapRest({
            url: baseUrl,
            serverType:'ONLINE'////使用SuperMap Online申请的key时需要定义Type
        }),


        projection: 'EPSG:4326'
    });
    map.addLayer(layer);

    query();

    function query() {
        //添加查询区域
        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);
        //创建集Bounds查询服务
        var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
            datasetNames: ["World:Capitals"],
            bounds: polygon.getExtent()
        });

        SuperMap.SecurityManager.registerKey(url,'GY9Ms8eBw4MLpIoXHjTC8Mzx');//此处需要替换为您针对服务申请的秘钥key
        new ol.supermap.FeatureService(url,{serverType:'ONLINE'}).getFeaturesByBounds(boundsParam, function (serviceResult)////使用SuperMap Online申请的key时需要定义Type
         {
            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>