openlayers3 在地图上叠加WFS查询矢量图层

随着终端设备计算能力的加强，用户在使用地图的时候也需要越来越多的交互效果。比如现在很火的室内导航，为了获得好的用户体验，就需要当用户单击某一商店的时候该商店的颜色能相应的变化，这就需要叠加矢量图层。如何能在瓦片地图之上叠加矢量图层呢，这个就需要用到WFS查询。

我的思路是：基于WFS查询把得到需要矢量显示的图层中数据，然后再显示。具体思路为：

1.通过geoserver的WFS服务查询所需要矢量显示的数据信息

2.设置矢量数据的显示样式

3.openlayers添加矢量图层

4.设置鼠标移上去的颜色变化效果

// Source retrieving WFS data in GML format using AJAX
    var vectorSource = new ol.source.ServerVector({
        format : new ol.format.WFS({
            featureNS : ‘http://www.indoornavigation.com‘,
            featureType : ‘tingchewei‘
        }),
        loader : function(extent, resolution, projection) {
            extent = [ 120.220336914063, 30.2083336275748, 120.221145629883,
                    30.2088940588137 ];
            var url = ‘http://10.16.36.101:8080/geoserver/wfs?‘
                    + ‘service=WFS&request=GetFeature&‘
                    + ‘version=1.1.0&typename=indoorNavigation:tingchewei‘;

            $.ajax({
                url : url
            }).done(function(response) {
                vectorSource.addFeatures(vectorSource.readFeatures(response));
            });
        },
        strategy : ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
            maxZoom : 19
        })),
        projection : ‘EPSG:4326‘
    });
// Vector layer
    var vectorChewei = new ol.layer.Vector({
        source : vectorSource,
        style : new ol.style.Style({
            fill : new ol.style.Fill({
                color : ‘rgba(12, 25, 25, 0.1)‘
            }),
            stroke : new ol.style.Stroke({
                color : ‘black‘,
                width : 2
            })
        })
    });
    map.addLayer(vectorChewei);

var featureOverlay = new ol.FeatureOverlay({
        map : map,
        style : function(feature, resolution) {
            var text = resolution < 5000 ? feature.get(‘name‘) : ‘‘;
            if (!highlightStyleCache[text]) {
                highlightStyleCache[text] = [ new ol.style.Style({
                    stroke : new ol.style.Stroke({
                        color : ‘#f00‘,
                        width : 1
                    }),
                    fill : new ol.style.Fill({
                        color : ‘rgba(255,0,0,0.6)‘
                    }),
                    text : new ol.style.Text({
                        font : ‘12px Calibri,sans-serif‘,
                        text : text,
                        fill : new ol.style.Fill({
                            color : ‘#000‘
                        }),
                        stroke : new ol.style.Stroke({
                            color : ‘#f00‘,
                            width : 3
                        })
                    })
                }) ];
            }
            return highlightStyleCache[text];
        }
    });

版权声明：本文为博主原创文章，未经博主允许不得转载。