openlayer之加载wfs服务

来源：互联网发布：企业彩铃录音软件编辑：程序博客网时间：2024/04/18 16:08

wfs服务是最灵活，功能最强大的webgis服务。通过向gis服务器请求，返回矢量数据,一般为两种格式（KML和geojson),当然还有其他格式。然后通过openlayer内置的解析函数，解析数据。但wfs返回的数据没有样式，需要自己设置样式（包括feature和layer样式）,否则使用默认样式。（feature>layer>default）feature样式得到feature后才进行设置。

使用wfs加载数据。

<!DOCTYPE html><html><head>    <title>WFS</title>    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">    <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>    <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script></head><body><div id="map" class="map"></div><script>    var vector = new ol.layer.Vector({        //数据来源        source: new ol.source.Vector({            format: new ol.format.GeoJSON(),            url: 'http://localhost:8089/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:tiger_roads&outputFormat=application/json&srsname=EPSG:4326'        }),        //layer样式        style: function(feature, resolution) {            return new ol.style.Style({                stroke: new ol.style.Stroke({                    color: 'blue',                    width: 1                })            });        }    });    var map = new ol.Map({        layers: [new ol.layer.Tile({            source: new ol.source.OSM()        }), vector],        target: 'map',        view: new ol.View({            center: [-73.99710639567148, 40.742270050255556],            maxZoom: 19,            zoom: 14,            projection: 'EPSG:4326'        })    });</script></body></html>

修改数据。（wfs强大之处就是它可以修改数据）
修改数据需要用到ol.Interaction,与数据进行交互，然后将修改后的数据返回服务器。完成修改。详细参见扯淡大叔的教程

阅读全文

0 0