随着终端设备计算能力的加强，用户在使用地图的时候也须要越来越多的交互效果。

比方如今非常火的室内导航，为了获得好的用户体验，就须要当用户单击某一商店的时候该商店的颜色能对应的变化。这就须要叠加矢量图层。

怎样能在瓦片地图之上叠加矢量图层呢，这个就须要用到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];

        }

    });