openlayer加载wfs服务,url中加过滤条件

最新推荐文章于 2024-04-23 10:04:21 发布

GISHUB

最新推荐文章于 2024-04-23 10:04:21 发布

阅读量738

点赞数

分类专栏： OpenLayers开发系列文章标签：前端

本文链接：https://blog.csdn.net/weixin_45565771/article/details/121975134

版权

OpenLayers开发系列专栏收录该内容

5 篇文章 1 订阅

订阅专栏

openlayer加载wfs服务,url中加过滤条件

<!DOCTYPE html>
<html>

<head>
    <title>WFS</title>
    <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">
    <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>

<body>
    <div id="map" class="map">
        <div id='statistics'></div>
    </div>
    <script>
            var name = '武汉'
            var serverURL = 'http://localhost/wfs?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application/json&srsname=EPSG:4326';
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA'
            }) //加载mapbox影像地图
        });

        var cia_Layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=eace3a4b29409c2cc169b7213a1abfb9'
            }) //加载天地图影像注记地图
        });

        var blueStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
            })
        });

        var greenStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'yellow',
                width: 1
            })
        });

        var vector = new ol.layer.Vector({
            //数据来源
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: `${serverURL}&typeName=cite:layer1&CQL_FILTER=name LIKE '${name}'`
            }),
            //layer样式
            style: function (feature) {
                var status = feature.get('status');
                if (status === 2) {
                    return greenStyle;
                } else {
                    return blueStyle;
                }
            },
        });
        var redStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 1
            })
        })

        var vector1 = new ol.layer.Vector({
            //数据来源
            source: new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                url: `${serverURL}&typeName=cite:layer2&CQL_FILTER=name LIKE '${name}'`
            }),
            //layer样式
            style: redStyle
        });
        var vectorSource = new ol.source.Vector();
        var vectorPolygon = new ol.layer.Vector({
            source: vectorSource,
            style: function (feature) {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 1
                    }),
                    text: new ol.style.Text({
                        font: 'bold 20px "Open Sans", "Arial Unicode MS", "sans-serif"',
                        text: feature.get('name'),
                        stroke: new ol.style.Stroke({
                            color: 'white',
                            width: 1
                        }),
                    })
                })
            },
        });


        fetch('https://geo.datav.aliyun.com/areas_v3/bound/420100_full.json', {
            method: 'GET',
        }).then(function (response) {
            return response.json();
        }).then(function (json) {
            var features = new ol.format.GeoJSON().readFeatures(json);
            vectorSource.addFeatures(features);
        });


        var map = new ol.Map({
            layers: [
                rootLayer,
                vector1,
                vector,
                vectorPolygon, cia_Layer
            ],
            target: 'map',
            view: new ol.View({
                center: [114.2574, 30.5753],
                maxZoom: 19,
                zoom: 14,
                projection: 'EPSG:4326'
            })
        });
        map.addControl(new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(6),
        }))

        vector.on('change', function (e, e1, e2, e3, e4) {
            var satrt = e.target.getSource().getFeatures().filter((ele) => {
                return ele.getProperties().status === 1
            })

            var finish = e.target.getSource().getFeatures().filter((ele) => {
                return ele.getProperties().status === 2
            })
            document.getElementById('statistics').innerHTML = "<p>未开始：" + satrt.length + ",完成：" + finish.length + "</p>";
        })

    </script>
</body>

</html>

GISHUB

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
openlayer加载wfs服务,url中加过滤条件

openlayer加载wfs服务,url中加过滤条件<!DOCTYPE html><html><head> <title>WFS</title> <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8"> <script src="https://openlayers.org/en/v5.3.0/build/ol.js
复制链接

扫一扫