草庐IT

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

刘亚运 2023-03-28 原文

随着计算机的快速发展,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()' />&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>
空间分析代码

 

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

RESTGIScolorspan245企业信息化

有关GIS应用|快速开发REST空间分析服务的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  4. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  5. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  8. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近,当我启动我的Rails服务器时,我收到了一长串警告。虽然它不影响我的应用程序,但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次?当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗?/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  9. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  10. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

随机推荐