OPENLAYERS3 overlay a WFS query vector layer on a map

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.