Vue+OpenLayers学习系列（十二）番外篇：openlayers6结合geoserver实现框选查询

最新推荐文章于 2023-06-05 09:45:00 发布

爱睡懒觉的老舅

最新推荐文章于 2023-06-05 09:45:00 发布

阅读量2.1k

点赞数 4

分类专栏： Vue WebGIS 前端文章标签： webgis geoserver openlayers

本文链接：https://blog.csdn.net/ocean111best/article/details/117607431

版权

前端同时被 3 个专栏收录

19 篇文章 17 订阅

订阅专栏

Vue

16 篇文章 1 订阅

订阅专栏

WebGIS

16 篇文章 13 订阅

订阅专栏

一、问题

这里面用的是ajax获取查询结果的信息，最重要的方法是 queryByPolygon(polygon,typeName,callback){ }。其中注意要查看下面这个字段是不是跟发布的字段是一样的。这个地方要多查看和熟悉geoserver的xml写法，不然会出现很多错误。

filter += '<PropertyName>the_geom</PropertyName>';

可以在geoserver管理界面中的图层里面查询该图层的详细信息界面：

queryByPolygon(polygon,typeName,callback){ }具体代码如下：

function queryByPolygon(polygon, typeName, callback){
        var filter =
                '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
        filter += '<And>';
        filter += '<Intersects>';
        filter += '<PropertyName>the_geom</PropertyName>';
        filter += '<gml:Polygon>';
        filter += '<gml:outerBoundaryIs>';
        filter += '<gml:LinearRing>';
        filter += '<gml:coordinates>' + polygon + '</gml:coordinates>';
        filter += '</gml:LinearRing>';
        filter += '</gml:outerBoundaryIs>';
        filter += '</gml:Polygon>';
        filter += '</Intersects>';
        filter += '</And>';
        filter += '</Filter>';
        var urlString = geoserverUrl + '/ows';
        var param = {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: typeName,
            outputFormat: 'application/json',
            filter: filter
        };
        var geojsonUrl = urlString + getParamString(param, urlString);
        $.ajax({
            url: geojsonUrl,
            async: true,
            type:'GET',
            dataType: 'jsonp',
            success(result) {
            callback(result);
        },
        error(err) {
			console.log(err);
        }
    })
    }

二、完整代码

<!DOCTYPE html>
<html>
<head>
    <title>openlayers6结合geoserver实现地图空间查询</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lib/ol.css">
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .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: 280px;
        }
        .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;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/ol.js"></script>
</head>
<body>
<div id="map"></div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>
<div style="position:absolute;top:50px;left:60px;z-index:999;">
    <button type="button" id="rect_btn">拉框查询</button>
    <button type="button" id="clear_btn">清空</button>
</div>
<script>

    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');


    var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });

    closer.onclick = function() {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
    };

    //绘制工具
    var draw = null;
    //绘制geojson矢量图层样式
    var geoJsonStyle =  new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#e6d933',
            lineDash: [4],
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 0, 0.1)'
        })
    });
    var geoserverUrl = 'http://localhost:8080/geoserver/ocean';
    var geojsonLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: geoJsonStyle
    });

    //绘制工具图形
    var drawsource  = new ol.source.Vector();
    var drawlayer  = new ol.layer.Vector({
        source: drawsource
    });


    //加载WFS数据
    let wfsVectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        projection: 'EPSG:4326',
        url: 'http://localhost:8080/geoserver/ocean/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ocean%3AGDSJ&maxFeatures=50&outputFormat=application%2Fjson',
        // url: 'http://localhost:8080/geoserver/ocean/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ocean%3Anyc_roads&maxFeatures=50&outputFormat=application%2Fjson',
        // url: 'http://192.168.2.83:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger%3AGDJS&maxFeatures=50&outputFormat=application%2Fjson',
        strategy: ol.loadingstrategy.bbox
    });

    let wfsVectorLayer = new ol.layer.Vector({
        source: wfsVectorSource,
        style: new ol.style.Style({
            image:new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "#3885ff",
                    opacity: 0.5
                })
            }),
            stroke:new ol.style.Stroke({
                        color: 'blue',
                        width: 2
                    }
            )
        }),
        visible: true
    });

    var layers = [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        drawlayer,
        wfsVectorLayer,
        geojsonLayer
    ];
    var map = new ol.Map({
        layers: layers,
        overlays: [overlay],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [104.114129, 37.550339],
            zoom: 4
        })
    });

    //框选查询
    $("#rect_btn").click(function(){
        clearMap();
        addInteraction("Box");
    });
    //清空
    $("#clear_btn").click(function(){
        clearMap();
    });

    function addInteraction(value){
        var geometryFunction;
        switch (value) {
            case "Box":
                value = 'Circle';
                geometryFunction = ol.interaction.Draw.createBox();
                break;
            case "Polygon":
                value = 'Polygon';
                break;
        }
        draw = new ol.interaction.Draw({
            source: drawsource,
            type: value,
            geometryFunction: geometryFunction
        });
        map.addInteraction(draw);
        draw.on('drawend',function(evt){
            clearMap();
            var feature = evt.feature;
            var extent = feature.getGeometry().getExtent();
            var polygon = null;
            if(extent && extent.length>0){
                //构造polygon
                polygon = '';
                polygon += extent[0] + ',' + extent[1] + ' ' ;
                polygon += extent[0] + ',' + extent[3] + ' ' ;
                polygon += extent[2] + ',' + extent[3] + ' ' ;
                polygon += extent[2] + ',' + extent[1] + ' ' ;
                polygon += extent[0] + ',' + extent[1] + ' ' ;
            }
            console.log('polygon',polygon);
            if(polygon){
                queryByPolygon(polygon,'GDSJ',callbackLastQueryWFSService);
            }

        });
    }
    /*空间查询图层
     *@method queryByPolygon
     *@param polygon 空间范围
     *@param typeName 图层名称
     *@return null
     */
    function queryByPolygon(polygon, typeName, callback){
        var filter =
                '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
        filter += '<And>';
        filter += '<Intersects>';
        filter += '<PropertyName>the_geom</PropertyName>';
        filter += '<gml:Polygon>';
        filter += '<gml:outerBoundaryIs>';
        filter += '<gml:LinearRing>';
        filter += '<gml:coordinates>' + polygon + '</gml:coordinates>';
        filter += '</gml:LinearRing>';
        filter += '</gml:outerBoundaryIs>';
        filter += '</gml:Polygon>';
        filter += '</Intersects>';
        filter += '</And>';
        filter += '</Filter>';
        var urlString = geoserverUrl + '/ows';
        var param = {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: typeName,
            outputFormat: 'application/json',
            filter: filter
        };
        var geojsonUrl = urlString + getParamString(param, urlString);
        $.ajax({
            url: geojsonUrl,
            async: true,
            type:'GET',
            dataType: 'jsonp',
            success(result) {
            callback(result);
        },
        error(err) {
			console.log(err);
        }
    })
    }

    function getParamString(obj, existingUrl, uppercase){
        var params = [];
        for (var i in obj) {
            params.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i]));
        }
        return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');
    }
    /*
     * 图层空间查询回调函数
     */
    function callbackLastQueryWFSService(data){
        console.log('data',data);
        if (data && data.features.length > 0) {
            clearGeojsonLayer();
            loadGeojsonLayer(data);
            var extent = geojsonLayer.getSource().getExtent();
            if(extent){
                map.getView().fit(extent);
            }
        }
    }
    /*
     * 绘制图形函数
     */
    function loadGeojsonLayer(geojson){
        geojsonLayer.setSource(new ol.source.Vector({features: (new ol.format.GeoJSON()).readFeatures(geojson)}));
    }
    /*
     * 清空绘制图形函数
     */
    function clearGeojsonLayer(){
        if (geojsonLayer && geojsonLayer.getSource()) {
            geojsonLayer.getSource().clear();
        }
    }

    function clearMap(){
        map.removeInteraction(draw);
        draw = null;
        clearGeojsonLayer();
        if (drawlayer && drawlayer.getSource()) {
            drawlayer.getSource().clear();
        }
    }

</script>



</body>
</html>

三、结果

加载后，点击框选查询，拉出多边形框，然后在控制台可以看到得出查询结果，如下图所示。

爱睡懒觉的老舅

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
Vue+OpenLayers学习系列（十二）番外篇：openlayers6结合geoserver实现框选查询

一、问题这里面用的是ajax获取查询结果的信息，最重要的方法是 queryByPolygon(polygon,typeName,callback){ }。其中注意要查看下面这个字段是不是跟发布的字段是一样的。这个地方要多查看和熟悉geoserver的xml写法，不然会出现很多错误。filter += '<PropertyName>the_geom</PropertyName>';可以在geoserver管理界面中的图层里面查询该图层的详细信息界面：queryBy
复制链接

扫一扫