使用OpenLayers3对接geoserver的WPS服务完成叠加分析

WPS服务在geoserver的安装就不再累赘了，

最近接到新任务，使用OpenLayers3对接geoserver的WPS服务完成叠加分析；作为一个刚开始玩WebGis的新人来说，WPS在网上很难找到资料，即使在GItHub；

下面直接拖出我的主要代码吧，

		var vector = new ol.layer.Vector(
				{
					source : new ol.source.Vector(
							{
								format : new ol.format.GeoJSON(),
								url : 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=test:县界_2010907_PolygonTo_Mid_Fea&outputFormat=application/json&srsname=EPSG:4326'
							}),
					style : function(feature, resolution) {
						return new ol.style.Style({
							stroke : new ol.style.Stroke({
								color : 'blue',
								width : 1
							})
						});
					}
				});

		var vector2 = new ol.layer.Vector(
				{
					source : new ol.source.Vector(
							{
								format : new ol.format.GeoJSON(),
								url : 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=test:行政区划&outputFormat=application/json&srsname=EPSG:4326'
							}),
					style : function(feature, resolution) {
						return new ol.style.Style({
							stroke : new ol.style.Stroke({
								color : 'blue',
								width : 1
							})
						});
					}
				});


		var map = new ol.Map({
			layers : [ vector, vector2 ],
			target : 'map',
			view : new ol.View({
				center : [ 110.950953, 26.93024 ],
				zoom : 10,
				projection : 'EPSG:4326'
			})
		});

		var geoStyle = function(feature, resolution) {
			return new ol.style.Style({
				stroke : new ol.style.Stroke({
					color : 'yellow',
					width : 1
				}),
				fill : new ol.style.Fill({
					color : 'red'
				})
			});
		}
		//样式缓冲区
		var styles = {
			'route' : new ol.style.Style({
				stroke : new ol.style.Stroke({
					width : 3,
					color : [ 237, 212, 0, 0.8 ]
				}),
				fill : new ol.style.Fill({
					color : 'red'
				})
			}),
			'flag' : new ol.style.Style({
				image : new ol.style.Icon({
					src : 'images/flag_rightgreen_.png',
					//  anchor: [0, 0],
					scale : 0.3
				})
			}),
		}

		var pointFeature = new ol.Feature({
			geometry : new ol.geom.Point([ 111.01861, 26.98929 ])
		})
		pointFeature.setStyle(styles.flag);
		vector2.getSource().addFeature(pointFeature);

		function test1() {

			$.ajax({
				url : 'http://localhost:8080/geoserver/ows?service=WPS&version=1.0.0',
				type : 'post',
				contentType : 'text/xml',
				data : '<?xml version="1.0" encoding="UTF-8"?><wps:Execute version="1.0.0" service="WPS" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.opengis.net/wps/1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:wps="http://www.opengis.net/wps/1.0.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wcs="http://www.opengis.net/wcs/1.1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="http://www.opengis.net/wps/1.0.0 http://schemas.opengis.net/wps/1.0.0/wpsAll.xsd"><ows:Identifier>geo:intersection</ows:Identifier><wps:DataInputs><wps:Input><ows:Identifier>a</ows:Identifier><wps:Data><wps:ComplexData mimeType="application/json"><![CDATA[{"type":"MultiPolygon","coordinates":[[[[111.547979,27.194707],[111.401323,27.194707],[111.401323,27.301949],[111.547979,27.301949],[111.547979,27.194707]]]]}]]></wps:ComplexData></wps:Data></wps:Input><wps:Input><ows:Identifier>b</ows:Identifier><wps:Data><wps:ComplexData mimeType="application/json"><![CDATA[{"type":"MultiPolygon","coordinates":[[[[111.457059,27.320988],[111.48062,27.298791],[111.48337,27.305464],[111.49128,27.308964],[111.49338,27.30344],[111.52886,27.303221],[111.530626,27.297193],[111.51836,27.286438],[111.51878,27.279101],[111.525774,27.284945],[111.529835,27.279965],[111.535006,27.281188],[111.54089,27.298834],[111.54477,27.287151],[111.55522,27.279722],[111.57638,27.282349],[111.583483,27.29577],[111.59556,27.296013],[111.59603113,27.29607888],[111.59796,27.277966],[111.60685,27.25613],[111.61978,27.254175],[111.61665,27.231459],[111.61002,27.221087],[111.61464,27.213604],[111.61288,27.206015],[111.59998,27.193861],[111.59149,27.195345],[111.5854,27.190758],[111.56934,27.153545],[111.57001,27.145041],[111.58059,27.140295],[111.58628,27.126844],[111.57954,27.113758],[111.58257,27.10607],[111.567881,27.104193],[111.553756,27.096807],[111.552493,27.091822],[111.537667,27.091527],[111.530926,27.096646],[111.536125,27.107106],[111.533795,27.120736],[111.526014,27.130145],[111.513369,27.134537],[111.508957,27.141995],[111.510594,27.149872],[111.50533,27.150793],[111.50024,27.143757],[111.48924,27.145695],[111.47911,27.140484],[111.480453,27.121504],[111.48533,27.113999],[111.47676,27.100023],[111.46868,27.099327],[111.46155,27.108757],[111.45939,27.09981],[111.44414,27.089643],[111.41988,27.083477],[111.42309,27.078222],[111.41753,27.076429],[111.40002,27.095564],[111.41278,27.105343],[111.4158,27.128939],[111.40322,27.139502],[111.39149,27.137999],[111.39381,27.158497],[111.38636,27.165211],[111.3813,27.163324],[111.37321,27.185902],[111.37557,27.195845],[111.3688,27.196405],[111.37023,27.20228],[111.34607,27.203426],[111.35087,27.217976],[111.347658,27.223573],[111.35781,27.230368],[111.35775,27.242579],[111.3492,27.256891],[111.344043,27.257544],[111.415225,27.291786],[111.408688,27.328371],[111.420889,27.336824],[111.437765,27.323632],[111.457059,27.320988]]]]}]]></wps:ComplexData></wps:Data></wps:Input></wps:DataInputs><wps:ResponseForm><wps:RawDataOutput mimeType="application/json"><ows:Identifier>result</ows:Identifier></wps:RawDataOutput></wps:ResponseForm></wps:Execute>',
				success : function(data) {
					
					if (data.type == "Polygon") {//如果几何图形是多边形,则调用，后续有更多需求再添加
						var route = new ol.geom.Polygon(data.coordinates);
					}

					var routeFeature = new ol.Feature({
						geometry : route
					})
					
					routeFeature.setStyle(styles.route);
					vector.getSource().addFeature(routeFeature);
				}
			})
		}

新学习者，有改正和完善的地方还希望各位大牛多多指教。

喜欢研究的人，可以下载源码研究http://download.csdn.net/detail/qq_35915384/9740821

转载自：https://blog.csdn.net/qq_35915384/article/details/54585466