高德地图api实现基于WFS服务通过纯ajax请求对要素进行查询的两种方式（ArcGIS Server和Geoserver发布的WFS服务）

1.基于ArcGIS Server发布的wfs服务的请求url示例:

REQUEST:GetFeature

typename:lzfw_wfs:lz_gcj02

Filter是过滤条件 通过传入点数据查询到包含该点的要素（注意 纬度 在前  经度在后 ，这块设置可以在发布服务的时候可以进行调整）

参考资料 https://enterprise.arcgis.com/zh-cn/server/latest/publish-services/linux/communicating-with-a-wfs-service-in-a-web-browser.htm

http://59.44.20.208:31114/arcgis/services/lzfw_wfs/MapServer/WFSServer?SERVICE=WFS&VERSION=1.1.0&REQUEST=GetFeature&typename=lzfw_wfs:lz_gcj02&Filter=<ogc:Filter><ogc:Contains><ogc:PropertyName>Shape</ogc:PropertyName><gml:Point srsName="urn:x-ogc:def:crs:EPSG:4326"><gml:pos srsName="urn:x-ogc:def:crs:EPSG:4326">41.749936  122.431577</gml:pos></gml:Point></ogc:Contains></ogc:Filter>

gaodemap.on("click",function(eve){
	        var lng=parseFloat(eve.lnglat.lng);
			var lat=parseFloat(eve.lnglat.lat);
			console.log(eve.lnglat)
			$.ajax({
				 type: "GET",
				 url: "http://localhost:6080/arcgis/services/lzfw_wfs/MapServer/WFSServer?SERVICE=WFS&VERSION=1.1.0&REQUEST=GetFeature&typename=lzfw_wfs:lz_gcj02&Filter=%3Cogc:Filter%3E%3Cogc:Contains%3E%3Cogc:PropertyName%3EShape%3C/ogc:PropertyName%3E%3Cgml:Point%20srsName=%22urn:x-ogc:def:crs:EPSG:4326%22%3E%3Cgml:pos%20srsName=%22urn:x-ogc:def:crs:EPSG:4326%22%3E"+lat+" "+lng+"%3C/gml:pos%3E%3C/gml:Point%3E%3C/ogc:Contains%3E%3C/ogc:Filter%3E",
				 dataType: "xml",
				 success: function(data){ 
					console.log(data)
					//提取数据 法1
					var polygon = data.getElementsByTagName('gml:posList')[0].innerHTML; 
					//提取数据 法2
					var countrys = data.getElementsByTagName('gml:featureMember')[0].outerHTML;  
					var x2js = new X2JS(); 
                    var jsonObj = x2js.xml_str2json(countrys); 
					console.log(jsonObj) 
					console.log(polygon)
				 },
				 error : function(e){
					console.log(e.status);
					console.log(e.responseText); 
				}
			});
		});

 

 返回结果，可以通过高德api在前端构造几何覆盖物了

2.基于GeoServer发布的wfs服务的请求url示例:

REQUEST:GetFeature

typeName:map:lz_gcj02

outputformat:json(geojson)

Filter是过滤条件 查询到与该点相交的要素

参考资料 https://my.oschina.net/u/588631/blog/884481

http://localhost:8080/geoserver/map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=map:lz_gcj02&outputformat=json" +
                    "&filter=<Filter%20xmlns=\"http://www.opengis.net/ogc\" xmlns:gml=\"http://www.opengis.net/gml\"> <Intersects><PropertyName>the_geom</PropertyName><gml:Point><gml:coordinates>" + lng + "," + lat + "</gml:coordinates></gml:Point></Intersects></Filter>

 gaodemap.on("click", function (eve) {
            console.log(eve.lnglat)
            var lng = parseFloat(eve.lnglat.lng);
            var lat = parseFloat(eve.lnglat.lat);
            console.log(lng);
            console.log(lat);
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/geoserver/map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=map:lz_gcj02&outputformat=json" +
                    "&filter=<Filter%20xmlns=\"http://www.opengis.net/ogc\" xmlns:gml=\"http://www.opengis.net/gml\">%20<Intersects>%20<PropertyName>the_geom</PropertyName>%20<gml:Point>%20<gml:coordinates>" + lng + "," + lat + "</gml:coordinates>%20</gml:Point>%20</Intersects>%20</Filter>",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                },
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });