随着终端设备计算能力的加强，用户在使用地图的时候也须要越来越多的交互效果。
比方如今非常火的室内导航，为了获得好的用户体验，就须要当用户单击某一商店的时候该商店的颜色能对应的变化。这就须要叠加矢量图层。
怎样能在瓦片地图之上叠加矢量图层呢，这个就须要用到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]; } });转载于:https://www.cnblogs.com/bhlsheji/p/5371299.html
相关资源：数据结构—成绩单生成器