云存储API


SuperMap Online云存储为您提供云端数据服务,不仅支持上传、存储和发布数据,也通过提供 地图API 数据API 空间分析API 帮助您方便快捷的调用地图及REST服务。您不再需要自行购买、安装、维护一台GIS服务器,有效为您节约开发成本、缩短开发周期。我们每日为用户提供定量的免费接口配额,您也可以通过 会员充值 升级您的访问权限。

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

在调用过程中需要注意的是:
调用REST地图服务时,URL地址需要显示当前地图命名。如,当前地图名为ChongQing1,您在调用时URL的地址应为:https://www.supermapol.com/proxy/iserver/services/map_chongqing_qy6yrsa0/rest/maps/ChongQing1
如您需要调用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>
    <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, url = "https://www.supermapol.com/proxy/iserver/services/map_chongqing_qy6yrsa0/rest/maps/ChongQing1"; <!--此处为您调用的的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: [108.55, 29.86],
                zoom: 8,
                projection: 'EPSG:4326',
                multiWorld: true
            })
        });
    var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: url,
                wrapX: false,
            }),
            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>
    <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, 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>调用数据服务</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,
            url = "https://www.supermapol.com/proxy/iserver/services/data_beijingshizhuzhaixiaoqu_it6j4fym/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: [116.49, 39.95],
                zoom: 12,
                projection: "EPSG:4326",
                multiWorld: true
            }),
            layers: [new ol.layer.Tile({
                source: new ol.source.Tianditu({
                    layerType: 'vec',
                    key: "此处需要使用您自行申请天地图的KEY",
                    projection: "EPSG:4326"
                })
            }), new ol.layer.Tile({
                source: new ol.source.Tianditu({
                    layerType: 'vec',
                    key: "此处需要使用您自行申请天地图的KEY",
                    isLabel: true,
                    projection: "EPSG:4326"
                })
            })]
        });
        query();
        function query() {
             <!--添加查询区域-->
            var polygon = new ol.geom.Polygon([
                [
                    [116.39, 39.90],
                    [116.59, 39.90],
                    [116.59, 40],
                    [116.39, 40],
                    [116.39, 39.90]
                ]
            ]);
            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: ["olpg6:dataExcel_193113830"],
                bounds: polygon.getExtent(),
                fromIndex: 0,
                toIndex: 9999,
                maxFeatures: 10000
            });
            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>

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>调用数据服务</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,
            url = "https://www.supermapol.com/proxy/iserver/services/data_beijingshizhuzhaixiaoqu_it6j4fym/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: [116.49, 39.95],
                zoom: 12,
                projection: "EPSG:4326",
                multiWorld: true
            }),
            layers: [new ol.layer.Tile({
                source: new ol.source.Tianditu({
                    layerType: 'vec',
                    key: "此处需要使用您自行申请天地图的KEY",
                    projection: "EPSG:4326"
                })
            }), new ol.layer.Tile({
                source: new ol.source.Tianditu({
                    layerType: 'vec',
                    key: "此处需要使用您自行申请天地图的KEY",
                    isLabel: true,
                    projection: "EPSG:4326"
                })
            })]
        });
        query();
        function query() {
             <!--添加查询区域-->
            var polygon = new ol.geom.Polygon([
                [
                    [116.39, 39.90],
                    [116.59, 39.90],
                    [116.59, 40],
                    [116.39, 40],
                    [116.39, 39.90]
                ]
            ]);
            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: ["olpg6:dataExcel_193113830"],
                bounds: polygon.getExtent(),
                fromIndex: 0,
                toIndex: 9999,
                maxFeatures: 10000
            });
            <!--服务如果没有设置成公开,需要下面设置key访问-->
            SuperMap.SecurityManager.registerKey(url, '此处需要替换为您针对服务申请的秘钥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>

空间分析API

在网页中调用REST空间分析服务

如您在云存储中上传了数据并发布为REST空间分析服务,同时将数据及服务均设置为公开,本示例为调用空间分析服务实现 缓冲区分析功能 点击 了解更多可通过调用空间分析服务实现的功能。

缓冲区分析功能示例代码如下, 点击 查看在线示例:

<!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() {
            <!--添加查询结果图层-->
            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);
            });
        }
        <!--缓冲区分析-->
        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>

如您不希望将您的服务设置为公开,需要先 申请key ,后通过调用空间分析服务实现 缓冲区分析功能 点击 了解更多可通过调用空间分析服务实现的功能。

缓冲区分析功能示例代码如下:

<!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() {
            <!--添加查询结果图层-->
            vectorSource = new ol.source.Vector({
                wrapX: false
            });
            resultLayer = new ol.layer.Vector({
                source: vectorSource,
            });
            map.addLayer(resultLayer);
        }
        <!--初始化图层,查询数据服务要素-->
        function initFeature() {
            widgets.alert.clearAlert();
            <!--私有服务需要用key访问,指定服务类型为ONLINE
            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);
            });
        }
        <!--缓冲区分析-->
        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,
                })
            });
            <!--私有服务需要用key访问,指定服务类型为ONLINE-->
            SuperMap.SecurityManager.registerKey(spatialanalystService, '此处需替换为您针对服务申请的key');
            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>