With the enhancement of the computing ability of terminal equipment, users need more and more interactive effect when they use the map.
For example, in today's very hot indoor navigation, in order to get a good user experience, it is necessary to change the color of the store when a user clicks on a store. This requires that vector layers be superimposed.
How can I overlay a vector layer on top of a tile map, which requires a WFS query.
My idea is that, based on WFS queries, you get the data in the layer that needs to be shown in vector and then display it. The detailed ideas are:
1. Querying the data information needed for vector display through GeoServer WFS service
2. Set the display style for vector data
3.openlayers adding vector layers
4. Set the color change effect of mouse move up
//Source retrieving WFS data in GML format using AJAX varVectorsource =NewOl.source.ServerVector ({format:NewOl.format.WFS ({featurens:' http://www.indoornavigation.com ', Featuretype:' Tingchewei '}), Loader: function(extent, resolution, projection) {extent = [120.220336914063,30.2083336275748,120.221145629883,30.2088940588137];varURL =' 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 (NewOl.tilegrid.XYZ ({maxzoom: +}), Projection:' epsg:4326 '});//Vector layer varVectorchewei =NewOl.layer.Vector ({source:vectorsource, style:NewOl.style.Style ({fill:NewOl.style.Fill ({color:' Rgba ( +, +, 0.1) '}), Stroke:NewOl.style.Stroke ({color:' Black ', Width:2}) }) }); Map.addlayer (Vectorchewei);varFeatureoverlay =NewOl. Featureoverlay ({map:map, style: function(feature, resolution) { varText = Resolution < the? Feature.get (' name ') :"';if(!highlightstylecache[text]) {Highlightstylecache[text] = [NewOl.style.Style ({stroke:NewOl.style.Stroke ({color:' #f00 ', Width:1}), fill:NewOl.style.Fill ({color:' Rgba (255,0,0,0.6) '}), Text:NewOl.style.Text ({font:' 12px calibri,sans-serif ', Text:text, fill:NewOl.style.Fill ({color:' #000 '}), Stroke:NewOl.style.Stroke ({color:' #f00 ', Width:3}) }) }) ]; }returnHighlightstylecache[text]; } });
OPENLAYERS3 overlay a WFS query vector layer on a map