GIS应用|快速开发REST空间分析服务
随着计算机的快速发展，GIS已经在各大领域得到应用，和我们的生活息息相关， 但是基于GIS几大厂商搭建服务，都会有一定的门槛，尤其是需要server，成本高，难度大，这里介绍一种在线GIS云平台，帮你快速解决服务端的问题，你只需要考虑自己客户端的业务层即可
SuperMap Online，可在线上传数据，发布多种REST服务，为您节省购买和部署SuperMap iServer的大量财力和时间成本，将数据和服务进行安全稳定的托管。
发布为REST空间分析服务的数据，可以通过少量代码开发来实现数据集、几何对象的缓冲分析、叠加分析、表面分析等空间分析功能。如通过结合REST数据服务的查询功能，可以打造缓冲区范围内点数据查询系统，助力在线选址。
北京三级综合医院1km范围内小区查询平台
下面小编将带领大家使用REST空间分析服务实现缓冲区分析功能！
01上传数据，发布服务，在线安全托管
打开SuperMap Online并登录您的账号，依次点击“资源中心”-“数据”-“上传数据”。
上传数据
选择数据类型并进行上传数据文件，本示例使用的数据为“北京市三级综合医院.csv”。（示例数据百度云链接：https://pan.baidu.com/s/1jmTS49U-hpcRDe1y-ld8uw 提取码: 6p3v）
选择数据并上传
云存储支持将上传的数据发布为地图、数据、三维、空间分析等多种类型的REST服务。本示例选择发布的服务类型为“REST空间分析服务”和“REST数据服务”。
选择服务发布类型
发布完成后的数据可以在“资源中心”-“数据”-“我的数据”查看。调用服务前需要开启数据共享。点击服务名称下对应服务地址，选择目标目录复制链接即可调用该REST空间分析服务。
修改数据权限，打开REST空间分析服务
选择目标目录
获取REST空间分析服务地址
REST空间分析服务也可以通过使用“密钥key”的方式来进行调用，搜索并打开SuperMap Online，在首页下方找到开发模块，更多服务调用方式等你发现！
SuperMap Online首页开发模块
02调用REST空间分析服务，实现缓冲区分析功能
实现缓冲区分析功能可以先调用REST数据服务，并在地图上显示点数据的位置。
调用REST数据服务，显示点数据
调用REST空间分析服务，对点数据进行缓冲区分析。
调用REST空间分析服务，实现缓冲区分析
REST空间分析服务通过结合REST数据服务的查询功能可实现在线数据查询，助力打造在线选址平台。示例中，通过结合REST数据服务和REST空间分析服务，打造北京三级综合医院1km范围内小区在线查询平台。
北京三级综合医院1km范围内小区查询平台
本篇文章以REST空间分析服务为例，主要描述了如何使用REST空间分析服务实现缓冲区分析功能。通过云存储可以发布地图、三维、空间分析等多种类型的REST服务，后续会发布更多关于REST服务使用的相关文章，还请大家多多关注哦！
代码百度云链接：https://pan.baidu.com/s/1vvt9d8cjJSf-ZxZxSarB0g 提取码: ab93
源码如下：
<!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> <style> .ol-zoom { bottom: .5em; font-size: 18px; top: unset; } .editPane { position: absolute; left: 20px; top: 8px; text-align: center; background: #FFF; /* z-index: 1000; */ /* border-radius: 4px; */ } .ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 120px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; } @media only screen and (max-width: 640px) { #msg_container { transform: translate(-35%, -20%); } .editPane { position: absolute; left: 0px; top: 8px; text-align: center; background: #FFF; } } </style> </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> <div id="popup" class="ol-popup"> <div id="popup-content"></div> </div> <div> <div class="panel panel-primary editPane" id="editPane"> <div class='panel-heading'> <h5 class='panel-title text-center'>操作栏</h5> </div> <div class='panel-body content'> <input type='button' class='btn btn-default' value="查询要素" onclick='initFeature()' /> <input type='button' class='btn btn-default' value="清除要素" onclick='resetFeature()' /> <input type='button' class='btn btn-default' value="缓冲区分析" onclick='bufferAnalystProcess()' /> <input type='button' class='btn btn-default' value="清除缓冲区" onclick='resetBuffer()' /> <input type='button' class='btn btn-default' value="几何查询" onclick='selectBuffer()' /> </div> </div> </div> <script type="text/javascript"> var map, vectorFeatrue, vectorBuffer, editFeaturesService, vectorSource, resultLayer, features, queryVectorSource, cour, dataService = "https://www.supermapol.com/proxy/iserver/services/data_beijingshisanjizongheyiyuan_t0sgqkly/rest/data", fangchan_service = "https://www.supermapol.com/proxy/iserver/services/data_fangchanshuju_uzz5geiv/rest/data", spatialanalystService = "https://www.supermapol.com/proxy/iserver/services/spatialanalyst_beijingshisanjizongheyiyuan_y3c93ow3/restjsr/spatialanalyst", container = document.getElementById('popup'), content = document.getElementById('popup-content'), overlay = new ol.Overlay(({ element: container, autoPan: false, autoPanAnimation: { duration: 250 }, offset: [0, 0] })), 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" }) })] }); //创建鼠标操作提示： var helpTooltipElement, helpTooltip, isclearPoint; createHelpTooltip(); function createHelpTooltip() { if (helpTooltipElement) { helpTooltipElement.parentNode.removeChild(helpTooltipElement); } helpTooltipElement = document.createElement('div'); helpTooltipElement.className = 'tooltip hidden'; helpTooltip = new ol.Overlay({ element: helpTooltipElement, offset: [15, 0], positioning: 'center-left' }); } loadLayer(); 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); map.on('pointermove', pointermoveLinstener); }); } function pointermoveLinstener(e) { widgets.alert.clearAlert(); cour = e.pixel; var select = false; var flag = false; map.forEachFeatureAtPixel(e.pixel, function(feature) { var s = feature.getGeometry(); if (feature.getProperties()['NAME']) { map.getTargetElement().style.cursor = 'pointer'; var contentHTML = feature.getProperties()['NAME']; content.innerHTML = contentHTML; overlay.setPosition(map.getCoordinateFromPixel(cour)); map.addOverlay(overlay); select = true flag = true } else if (feature.getProperties()['名称'] && !flag) { map.getTargetElement().style.cursor = 'pointer'; var contentHTML = feature.getProperties()['名称']; content.innerHTML = contentHTML; overlay.setPosition(map.getCoordinateFromPixel(cour)); map.addOverlay(overlay); select = true } }, { hitTolerance: 10 }); if (!select) { map.getTargetElement().style.cursor = ''; overlay.setPosition(undefined); map.removeOverlay(overlay); } if (isclearPoint) { helpTooltipElement.innerHTML = '选择要查询的区域'; helpTooltip.setPosition(e.coordinate); helpTooltipElement.classList.remove('hidden'); map.addOverlay(helpTooltip); } else { helpTooltip.setPosition(undefined); helpTooltipElement.classList.add('hidden'); } } function resetFeature() { widgets.alert.clearAlert(); if (features) { vectorSource.clear(); features = null; } else { widgets.alert.showAlert('没有要素可以清除', false); } } //缓冲区分析 function bufferAnalystProcess() { widgets.alert.clearAlert(); if (vectorBuffer) { widgets.alert.showAlert('已经进行了缓冲区分析', false); } else { if (features) { 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); }); } else { widgets.alert.showAlert('请先查询要素', false); } } } function resetBuffer() { widgets.alert.clearAlert(); if (queryVectorSource) { queryVectorSource.clear(); queryVectorSource = null; } if (vectorBuffer) { vectorBuffer.clear(); vectorBuffer = null; } else { widgets.alert.showAlert('没有缓冲区可以清除', false); } } function selectBuffer() { widgets.alert.clearAlert(); if (queryVectorSource) { queryVectorSource.clear(); queryVectorSource = null; } if (vectorBuffer) { isclearPoint = true; map.on('click', bufferQery); } else { widgets.alert.showAlert('请先进行缓冲区分析', false); } } function bufferQery(e) { query = null; map.forEachFeatureAtPixel(e.pixel, function(feature) { //只选中第一个要素： if (!query) { query = feature; var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({ datasetNames: ["olpg6:datasetcsv_1969900686"], geometry: query.getGeometry(), spatialQueryMode: "CONTAIN", fromIndex: 0, toIndex: 9999, maxFeatures: 10000 }); new ol.supermap.FeatureService(fangchan_service).getFeaturesByGeometry(geometryParam, function(serviceResult) { queryVectorSource = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features), wrapX: false }); resultLayer = new ol.layer.Vector({ source: queryVectorSource, style: new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: [255, 0, 0, 0.5] }), stroke: new ol.style.Stroke({ color: 'red', width: 2 }), radius: 8 }) }) }); map.getView().animate({ duration: 850, zoom: 15, center: [query.getGeometry().extent_[0], query.getGeometry().extent_[1]] }); map.addLayer(resultLayer); isclearPoint = false; closeSelectListener(); }); } }, { hitTolerance: 1 }); } function closeSelectListener() { isclearPoint = false; map.un('click', bufferQery); helpTooltip.setPosition(undefined); map.removeOverlay(helpTooltip); helpTooltipElement.classList.add('hidden'); } </script> </body> </html>
注：文中使用数据均为示例数据，可能与实际情况存在偏差。
