Functions to be implemented: Fuzzy search of city POI in a map is implemented based on openlayers, and location-based query is provided (circle-based query is used in GIS, in other words, after determining the user location, you can query the POI in a certain range around the user.) and polygon-based queries (you can draw a polygon by yourself, implement poi Query within the polygon range). Shows the set interface.
1. Interface implementation
The page body is implemented as follows:
<Body onload = "Init ()"> <Div id = "searchdiv" style = "position: absolute; top: 50px; left: 80px; width: 300px; Height: 100px; z-index: 99999; Border: 1px solid # CCC; padding: 1em; "> <ul id =" controls "> <li> <label for =" pointtoggle "> keywords: </label> <input name = "searchkey" id = "searchkey" type = "text"> <input name = "type" value = "Search" id = "polygontoggle" onclick = "Search () "type =" button "> </LI> <li> <input name =" type "value =" point "id =" free "Checked =" checked "type =" radio "onclick =" setfree (); "> <label for =" pointtoggle "> unlimited </label> </LI> <li> <input name =" type "value =" point "id =" nearbysearch "onclick = "drawcircle (); "type =" radio "> <label for =" nearbysearch "> nearby search </label> <select id =" radius "onchange =" setsize (parsefloat (this. value) "style =" width: 100px "> <option value =" 0.01000 "> 1000 </option> <option value =" 0.02000 "> 2000 </option> <option value =" 0.03000 "> 3000 </ option> </SELECT> <label for = "pointtoggle"> </label> </LI> <li> <input name = "type" value = "polygon" id = "polygonsearch" onclick = "drawpolyon (); "type =" radio "> <label for =" polygonsearch "> polygon search </label> </LI> </ul> </div> <Div id =" directiondiv" style = "position: absolute; top: 200px; left: 80px; width: 300px; Z-index: 99999; Border: 1px solid # CCC; padding: 1em; "> <Table> <tr> <TD> start point: </TD> <input id = "start" type = "text"> </input> <input id = "starthidden" type = "text" style = "Display: none "> </input> </TD> <TD rowspan =" 2 "> <input id =" direction "style =" width: 80px; height: 40px "type =" button "value =" Search Path "onclick =" direction () "> </input> </tr> <TD> endpoint: </TD> <input id = "end" type = "text"> </input> <input id = "endhidden" type = "text" style = "Display: none "> </input> </TD> </tr> </table> </div> <Div id =" map "class =" smallmap "> </div> </body>
2. Implementation of the circle and Polygon method during peripheral search
/*** Implementation of circle and polygon Methods */var drawpolygncontrol; var polyoptions; function drawcircle () {// drawpolygncontrol. deactivate (); // Delete the previously drawn circle or polygon setfree (); // If (markslayer! = NULL) // markslayer. removeallfeatures (); If (document. getelementbyid ("nearbysearch "). checked) {// polyoptions = {sides: 4}; drawpolygncontrol = new openlayers. control. drawfeature (polygonlayer, openlayers. handler. regularpolygon, {handleroptions: polyoptions}); setoptions ({sides: parseint ("40")}); setsize (parsefloat ("0.01000"); map. addcontrol (drawpolygncontrol); drawpolygncontrol. activate ();} else {// drawc Ontrols. deactivate (); // marks. clearmarkers (); // polygonlayer. removeallfeatures (); // drawpolygncontrol. deactivate (); // AP. removecontrol (drawpolygncontrol); // alert ("Fuck your sister"); setfree () ;}} function drawpolyon () {// click. deactivate (); // polygonlayer. removeallfeatures (); setfree (); // If (markslayer! = NULL) // markslayer. removeallfeatures (); If (document. getelementbyid ("polygonsearch "). checked) {drawpolygncontrol = new openlayers. control. drawfeature (polygonlayer, openlayers. handler. polygon); map. addcontrol (drawpolygncontrol); drawpolygncontrol. activate ();} else {// drawcontrols. deactivate (); // marks. clearmarkers (); // polygonlayer. removeallfeatures (); // drawpolygncontrol. deactivate (); // AP. removecontrol (Drawpolygncontrol); setfree () ;}} function setfree () {If (drawpolygncontrol instanceof openlayers. Control. drawfeature & drawpolygncontrol! = NULL) {drawpolygncontrol. Deactivate (); map. removecontrol (drawpolygncontrol);} click. Deactivate (); If (polygonlayer! = NULL) {polygonlayer. removeallfeatures ();} If (markslayer! = NULL) markslayer. removeallfeatures ();} function setoptions (options) {drawpolygncontrol. handler. setoptions (options);} function setsize (fraction) {var radius = fraction * map. getextent (). getheight (); drawpolygncontrol. handler. setoptions ({radius: radius, angle: 0 });}
In the above Code, the drawcircle function has a polyoptions, which needs to be set in the init () function as follows:
Polyoptions = {sides: 4 };
3. Implement the search function. Here, the search for peripheral locations and polygon are collectively referred to as range-based searches, and the search based on keywords on the interface is called common searches. Here, common search is implemented in one way, and range-based search is implemented in one way. In range-based search, the implementation principle of circle-based search and polygon-based search is based on keyword search, and then the search result is superimposed with the circle or polygon, if yes, the poi point meets the condition.
Implementation Code:
/*** Poi search service ** supports common search, peripheral search, and polygon search **/var geometry; var markslayer; // stores the selected poifunction search () {If (drawpolygncontrol instanceof openlayers. control. drawfeature & drawpolygncontrol! = NULL) {drawpolygncontrol. Deactivate (); map. removecontrol (drawpolygncontrol);} If (markslayer! = NULL) {markslayer. removeallfeatures (); map. removelayer (markslayer);} var searchstr = document. getelementbyid ("searchkey "). value; If (searchstr = NULL | searchstr = "") {alert ("Enter the search keyword! "); Return;} If (marks! = NULL) marks. clearmarkers (); If (routelayer! = NULL) routelayer. removeallfeatures (); If (stoplayer! = NULL) stoplayer. removeallfeatures (); // If (document. getelementbyid ("nearbysearch "). checked | document. getelementbyid ("polygonsearch "). checked) {geometry = polygonlayer. features [0]. geometry; markslayer = new openlayers. layer. vector ("WFS", {strategies: [New openlayers. strategy. bBox ()], Protocol: New openlayers. protocol. WFS ({URL: "http: // 192.168.1.50: 8080/geoserver/WFS? ", Featuretype:" res2_4m ", featurens:" http://www.cxzx.com "}), stylemap: New openlayers. stylemap ({externalgraphic: 'img/marker-target.png ', graphicwidth: 20, graphicheight: 24, graphicyoffset:-24,}), filter: New openlayers. filter. logical ({type: openlayers. filter. logical. and, filters: [New openlayers. filter. comparison ({type: openlayers. filter. comparison. like, property: "name", value: "*" + sear Chstr + "*"}), new openlayers. filter. spatial ({type: openlayers. filter. spatial. intersects, value: geometry, // projection: 'epsg: 100'})]}); map. addlayer (markslayer); addpop () ;}// else {markslayer = new openlayers. layer. vector ("WFS", {strategies: [New openlayers. strategy. bBox ()], Protocol: New openlayers. protocol. WFS ({URL: "http: // 192.168.1.50: 8080/geoserver/WFS? ", Featuretype:" res2_4m ", featurens:" http://www.cxzx.com "}), stylemap: New openlayers. stylemap ({externalgraphic: 'immg/marker-target.png ', graphicwidth: 20, graphicheight: 24, graphicyoffset:-24,}), // filter: New openlayers. filter. comparison ({type: openlayers. filter. comparison. like, property: "name", value: "*" + searchstr + "*"}); map. addlayer (markslayer); addpop () ;}// end function search
In the above Code, featuretype: "res2_4m", is the layer where the city poi is located, featurens: "http://www.cxzx.com" is the URI of the workspace where the map data is located, as shown in:
4. Implemented Functions
In a normal query, enter the "State" search result as follows:
In the peripheral search, after the user's location and circle radius are set, the search results are as follows:
In polygon search, after a polygon is drawn and a keyword is set, the search result is as follows:
Filter-based WFS query in openlayers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
