登录
目录
当前位置： 首页 > 文档资料 > SuperMap Online 在线文档 >

云存储API

优质
小牛编辑
127浏览
2023-12-01

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

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

在调用过程中需要注意的是：
调用REST地图服务时，URL地址需要显示当前地图命名。如，当前地图名为ChongQing1，您在调用时URL的地址应为：https://www.xnip.cn/doc/vbKEz7lby6/proxy/iserver/services/map_chongqing_qy6yrsa0/rest/maps/ChongQing1
如您需要调用REST数据服务，URL地址仅需显示数据服务的根节点(data)，如：https://www.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/proxy/iserver/services/data_beijingshisanjizongheyiyuan_t0sgqkly/rest/data",
            spatialanalystService = "https://www.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/proxy/iserver/services/data_beijingshisanjizongheyiyuan_t0sgqkly/rest/data",
            spatialanalystService = "https://www.xnip.cn/doc/vbKEz7lby6/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.xnip.cn/doc/vbKEz7lby6/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>
免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn