Geoserver+Openlayers拉框查詢

番茄西紅柿發(fā)布于2019-04-23 11:46 / 1809人閱讀

摘要：注意的版本號(hào)，高版本存在中新語法不兼容的情況查詢類型點(diǎn)擊多邊形拉框圖層名稱，可以是單個(gè)或多個(gè)重點(diǎn)，不要改變回調(diào)函數(shù)聲明加載函數(shù)傳參解決跨域的關(guān)鍵回調(diào)回調(diào)函數(shù)使用載入要素用于刪除之前的框，表示號(hào)，隨便取一個(gè)刪除之前的部分

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="geoserver/ol.css" type="text/css">
    <script src="geoserver/ol.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="plugins/layui-v2.4.3/layui/css/layui.css">
    <script src="plugins/layui-v2.4.3/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <#--注意openlayer的版本號(hào)，高版本存在es6中新語法不兼容的情況-->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<style>
    #map {
        height: 600px;
        /*width: 1024px;*/
        /* float: left;*/
    }
</style>
<body>
<div id="map">
<form class="form-inline">
    <label>查詢類型</label>
    <select id="type">
        <option value="None">None</option>
        <option value="Point">點(diǎn)擊</option>
        <option value="Polygon">多邊形</option>
        <option value="Circle">拉框</option>
    </select>
</form>
</div>
<script>
    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [104.07, 30.72],
            zoom: 7
        })
    });
    var wfsParams = {
        service: 'WFS',
        version: '1.1.1',
        request: 'GetFeature',
        typeName: 'map_dz:tl_lx_g',  //圖層名稱，可以是單個(gè)或多個(gè)
        outputFormat: 'text/javascript',  //重點(diǎn)，不要改變
        format_options: 'callback:loadFeatures'  //回調(diào)函數(shù)聲明
    };
 
    var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        loader: function (extent, resolution, projection) {  //加載函數(shù)
            var url = 'http://192.168.1.113:8080/geoserver/map_dz/wms';
            $.ajax({
                url: url,
                data: $.param(wfsParams),   //傳參
                type: 'GET',
                dataType: 'jsonp',   //解決跨域的關(guān)鍵
                jsonpCallback: 'loadFeatures'  //回調(diào)
 
            });
        },
        strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
            maxZoom: 20
        })),
        projection: 'EPSG:4326'
    });
    //回調(diào)函數(shù)使用
    window.loadFeatures = function (response) {
        vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  //載入要素
    };
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            })
        })
    });
    map.addLayer(vectorLayer);
    var draw;
    var typeSelect = document.getElementById('type');
    var value;
    var num=10;//用于刪除之前的框，表示號(hào)，隨便取一個(gè)
    function addInteraction() {
        if (value !== 'None') {
            if (value === 'Polygon') {
                draw = new ol.interaction.Draw({
                    source: vectorLayer.getSource(),
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: '#ffcc33',
                            width: 2
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffcc33'
                            })
                        })
                    }),
                    type: value
                });
            } else if (value === 'Circle') {
                draw = new ol.interaction.Draw({
                    source: vectorLayer.getSource(),
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: '#ffcc33',
                            width: 2
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffcc33'
                            })
                        })
                    }),
                    type: value,
                    geometryFunction: ol.interaction.Draw.createBox()
                });
            } else if (value === 'Point') {
                draw = new ol.interaction.Draw({
                    source: vectorLayer.getSource(),
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: '#ffcc33',
                            width: 2
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffcc33'
                            })
                        })
                    }),
                    type: value
                });
            }
 
            map.addInteraction(draw);
            //刪除之前draw的部分
            draw.on('drawstart',function(evt) {
                var featureAdd=vectorLayer.getSource().getFeatureById(num);
                if(featureAdd!=null){
                    vectorLayer.getSource().removeFeature(featureAdd);
                }
            });
            //繪圖結(jié)束，處理選中部分
            draw.on('drawend',function(e){
                e.feature.setId(num);
                var geom=e.feature.getGeometry();
                var coor = geom.v;
                mapSelect(coor);
            });
        }
    }
    //選擇事件
    typeSelect.onchange = function() {
        value = typeSelect.value;
        map.removeInteraction(draw);
        addInteraction();
    };
 
    //draw圖像與原始數(shù)據(jù)相交
    function mapSelect(coor) {
        if(value=='Point') {
            coor = [coor[0]-0.0001,coor[1]-0.0001,coor[0]+0.0001,coor[1]+0.0001];
        }
        var FILTER = '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><BBOX><PropertyName>geom</PropertyName><gml:Envelope srsName="EPSG:4326"><gml:lowerCorner>' + coor[0] + '  ' + coor[1] + '</gml:lowerCorner><gml:upperCorner>' + coor[2] + '  ' + coor[3] + '</gml:upperCorner></gml:Envelope></BBOX></Filter>';
        getFeature({
            typename: 'map_dz:tl_lx_g',//查詢的服務(wù)圖層名稱
            filter: FILTER,//查詢條件
            callback: 'getIdentifyroadGrid'//查詢的回調(diào)函數(shù)
        });
    }
    var selectNum=[];
    var geojsonFormat = new ol.format.GeoJSON({defaultDataProjection: "EPSG:4326"});
    function getIdentifyroadGrid(res) {
        var queryData = [];
        var features = geojsonFormat.readFeatures(res);
 
       for (var nu = 0; nu<selectNum.length;nu++) {
            var featureSelect=vectorLayer.getSource().getFeatureById(selectNum[nu]);
            if(featureSelect!=null) {
                featureSelect.setStyle(
                        new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'rgba(0, 0, 255, 1.0)',
                                width: 2
                            })
                        }));
            }
        }
        selectNum=[];
        for (var i = 0; i < features.length; i++) {
            var feature = features[i];
            console.log(feature);
            selectNum.push(feature.f);
            var featureSelectCurrent=vectorLayer.getSource().getFeatureById(feature.f);
            featureSelectCurrent.setStyle(
                    new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: '#ff4118',
                            width: 2
                        })
                    }));
            var lxmc = feature.H["lxmc"];
            var ldbm = feature.H["ldbm"];
            var lxbh = feature.H["lxbh"];
            var result = {
                "lxmc": lxmc,
                "ldbm": ldbm,
                "lxbh": lxbh,
                "setindex": i
            };
            queryData.push(result)
        }
        console.log(selectNum);
        var tableIns=null;
        var dataTable = "<table class="layui-table" lay-filter="demo" id="joinTab"></table>";
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var index = layer.open({
                type: 1 //Page層類型
                , title: '要素屬性'
                , shade: 0 //遮罩透明度
                , anim: 0 //0-6的動(dòng)畫形式，-1不開啟
                , content: dataTable
                , offset: ['250px', '290px']
                , zIndex: 1
                , scrollbar: false
                , resize: false
                , skin: 'layui-layer-molv'
                , closeBtn: 2
                , btn: ["關(guān)閉"]
                , yes: function (index) {
                    layer.close(index);
                }
                , cancel: function () {
                }
            });
            tableIns = table.render({
                elem: "#joinTab",
                width: "auto",
                height: "auto",
                data: queryData,
                initSort: {field: 'lxbh', type: 'desc'},
                cols: [[
                    {field: 'lxmc', title: '路線名稱', width: 150, align: 'center', sort: true},
                    {field: 'ldbm', title: '路線編號(hào)', width: 150, align: 'center', sort: true},
                    {field: 'lxbh', title: '路段編碼', width: 150, align: 'center', sort: true}
                ]]
            });
            layer.style(index, {
                opacity: 0.8
            });
        });
 
        if (tableIns) {
            tableIns.reload({
                data: queryData
            });
        } else {
            // console.log("Do Nothing!");
        }
    }
 
    //請求wfs數(shù)據(jù)
    function getFeature(options) {
        $.ajax(/*'http://192.168.1.113:8080/geoserver/map_dz/wms', */{
            type: 'GET',
            url: 'http://192.168.1.113:8080/geoserver/map_dz/wms',
            data: {
                service: 'WFS',
                version: '1.1.1',
                request: 'GetFeature',
                typename: options.typename,
                srsname: options.srid,
                outputFormat: 'text/javascript',
                viewparams: options.viewparams,
                bbox: (options.extent === undefined) ? undefined : options.extent.join(',') + ',' + options.srid,
                filter: options.filter
            },
            dataType: 'jsonp',
            jsonp: 'format_options',
            jsonpCallback: 'callback:' + options.callback
        });
 
    }
 
</script>
</body>
</html>

GPU云服務(wù)器云服務(wù)器 GeoServer openlayers geoserver oracle openlayers縮放

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1130.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 740·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3986·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3816·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3873·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3809·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3907·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3584·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6197·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Geoserver+Openlayers拉框查詢

相關(guān)文章

比較好的網(wǎng)站推薦

web前端技術(shù)體系大全

**基于Python實(shí)現(xiàn)GeoServer矢量文件批量發(fā)布**

**Vue下的cesium使用GeoServer的wms服務(wù)跨域問題**

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Geoserver+Openlayers拉框查詢

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！