GIS应用|快速开发REST空间分析服务

随着计算机的快速发展,GIS已经在各大领域得到应用,和我们的生活息息相关, 但是基于GIS几大厂商搭建服务,都会有一定的门槛,尤其是需要server,成本高,难度大,这里介绍一种在线GIS云平台,帮你快速解决服务端的问题,你只需要考虑自己客户端的业务层即可

SuperMap Online,可在线上传数据,发布多种REST服务,为您节省购买和部署SuperMap iServer的大量财力和时间成本,将数据和服务进行安全稳定的托管。

发布为REST空间分析服务的数据,可以通过少量代码开发来实现数据集、几何对象的缓冲分析、叠加分析、表面分析等空间分析功能。如通过结合REST数据服务的查询功能,可以打造缓冲区范围内点数据查询系统,助力在线选址。

GIS应用|快速开发REST空间分析服务

 

北京三级综合医院1km范围内小区查询平台

 

下面小编将带领大家使用REST空间分析服务实现缓冲区分析功能!

 

01上传数据,发布服务,在线安全托管

打开SuperMap Online并登录您的账号,依次点击“资源中心”-“数据”-“上传数据”。

GIS应用|快速开发REST空间分析服务

 

上传数据

选择数据类型并进行上传数据文件,本示例使用的数据为“北京市三级综合医院.csv”。(示例数据百度云链接:https://pan.baidu.com/s/1jmTS49U-hpcRDe1y-ld8uw 提取码: 6p3v)

GIS应用|快速开发REST空间分析服务

 

 

选择数据并上传

云存储支持将上传的数据发布为地图、数据、三维、空间分析等多种类型的REST服务。本示例选择发布的服务类型为“REST空间分析服务”和“REST数据服务”。

 GIS应用|快速开发REST空间分析服务

 

 

选择服务发布类型

发布完成后的数据可以在“资源中心”-“数据”-“我的数据”查看。调用服务前需要开启数据共享。点击服务名称下对应服务地址,选择目标目录复制链接即可调用该REST空间分析服务。

GIS应用|快速开发REST空间分析服务

 

 

修改数据权限,打开REST空间分析服务

GIS应用|快速开发REST空间分析服务

 

选择目标目录

 GIS应用|快速开发REST空间分析服务

 

 

获取REST空间分析服务地址

REST空间分析服务也可以通过使用“密钥key”的方式来进行调用,搜索并打开SuperMap Online,在首页下方找到开发模块,更多服务调用方式等你发现!

GIS应用|快速开发REST空间分析服务

 

 

SuperMap Online首页开发模块

 

 

02调用REST空间分析服务,实现缓冲区分析功能

实现缓冲区分析功能可以先调用REST数据服务,并在地图上显示点数据的位置。

GIS应用|快速开发REST空间分析服务

 

 

调用REST数据服务,显示点数据

调用REST空间分析服务,对点数据进行缓冲区分析。

GIS应用|快速开发REST空间分析服务

 

 

调用REST空间分析服务,实现缓冲区分析

REST空间分析服务通过结合REST数据服务的查询功能可实现在线数据查询,助力打造在线选址平台。示例中,通过结合REST数据服务和REST空间分析服务,打造北京三级综合医院1km范围内小区在线查询平台。

GIS应用|快速开发REST空间分析服务

 

 

北京三级综合医院1km范围内小区查询平台

 

本篇文章以REST空间分析服务为例,主要描述了如何使用REST空间分析服务实现缓冲区分析功能。通过云存储可以发布地图、三维、空间分析等多种类型的REST服务,后续会发布更多关于REST服务使用的相关文章,还请大家多多关注哦!

代码百度云链接:https://pan.baidu.com/s/1vvt9d8cjJSf-ZxZxSarB0g 提取码: ab93

源码如下:

GIS应用|快速开发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>
    <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()' />&nbsp;
                <input type='button' class='btn btn-default' value="清除要素" onclick='resetFeature()' />&nbsp;
                <input type='button' class='btn btn-default' value="缓冲区分析" onclick='bufferAnalystProcess()' />&nbsp;
                <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>
空间分析代码

 

注:文中使用数据均为示例数据,可能与实际情况存在偏差。

上一篇:JAVA---方法的重载


下一篇:RedMine项目管理系统邮件推送设置(Windows环境)