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()' />&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>

空間分析代碼

注：文中使用資料均為示例資料，可能與實際情況存在偏差，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/373858.html

標籤：其他

上一篇：SAP S4HANA 實戰LTMC - 打響了第一炮！

下一篇：SAP公司間STO流程里外向交貨單PGI后自動觸發內向交貨單的實作