云存储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>