leaflet加载GeoServer的WFS服务

geoserver 能很好地和ol进行结合，geoserver是一个很好的开源的服务器，免费开源，虽然在使用上还比不上ArcGerser但是开源，leaflet主框架支持加载wms服务，没有WFS服务，加载WFS需要用个WFS插件，但是限制太多，在这里选用的方式为

Ajax的方式加载，加载返回geojson数据结合散点聚合插件。

效果图：

一、加载数据代码

        function loadWFS(layerName, epsg) {
            var urlString = "http://localhost:8080/geoserver/cite/ows";
            var param = {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typeName: layerName,
                outputFormat: 'application/json',
                maxFeatures:3200,
                srsName: epsg
            };
            var u = urlString + L.Util.getParamString(param, urlString);
            
            console.log(u);          
            $.ajax({
                url:u,
                dataType: 'json',
                success: loadWfsHandler,

               });
            function loadWfsHandler(data) {
                console.log(data);
                layer = L.geoJson(data, {
                    pointToLayer: function (feature, latlng) {
                        var title = feature.properties.name;
                        var marker = L.marker(L.latLng(feature.properties.lat, feature.properties.lon));
                        marker.bindPopup(title);
                        markers.addLayer(marker);
                    }
                })

            }
        }

二、demo示例

 

转载于:https://www.cnblogs.com/tuboshu/p/10752294.html