openlayers3 通过wfs请求方式添加矢量vector图层

通过wfs方式向后台geoserver请求矢量数据，然后在前端通过vectorlayer展示出来，增强交互效果。

function getParkingLayerFunc(mapUrl,parkingLayerName){
	//获取该坐标系下地图边界
	var projectionExtent = ****.projection.getExtent();
	var namespace = ****.mapSpace;
	//wfs请求获取矢量图层gml数据信息
	****.vectorSource = new ol.source.Vector({		
		loader : function(resolution, projection) {			
			var dataUrl = mapUrl+'/geoserver/wfs?'
					+ 'service=WFS&request=GetFeature&'
					+ 'version=1.1.0&typename='
					+namespace
					+ ':'
					+ parkingLayerName;

			$.ajax({
				url : dataUrl
			}).done(function(response) {
				var format = new ol.format.WFS({
					featureNS : 'http://www.'+namespace+'.com',
					featureType : parkingLayerName
				});
				var features = format.readFeatures(response,
						{featureProjection: projection}
				);
				****.vectorSource.addFeatures(features);
			});
		},
		strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
			maxZoom: 23
		}))		
	});
	
	var getText = function(feature, resolution) {
		var type = "normal";
		var maxResolution = 6.705522537231445e-7;
		var text = feature.get('number');
		
		if (resolution > maxResolution) {
			text = '';
		} else if (type == 'hide') {
			text = '';
		} else if (type == 'shorten') {
			text = text.trunc(12);
		} else if (type == 'wrap') {
			text = stringDivider(text, 16, '\n');
		}

		return text;
	};
	
    var createPolygonStyleFunction = function(){
		return function(feature,resolution){
			var style = new ol.style.Style({
				fill : new ol.style.Fill({
					color : ****.parkFillColor
				}),
				stroke : new ol.style.Stroke({
					color : ****.parkBorderColor,
					width : 1
				}),
				text:createTextStyle(feature,resolution)
				});
			return [style];	
		}
	};
	
	var createTextStyle = function(feature, resolution) {
		var align = "center";
		var baseline = "middle";
		var size = "14px";
		var offsetX = 0;
		var offsetY = 0;
		var weight = "bold";
		var rotation = feature.get('rotation');
		var font = weight + ' ' + size + ' ' + "Arial";
		var fillColor = 'black';
		var outlineColor = 'black';
		var outlineWidth = 1;

		return new ol.style.Text({
			textAlign: align,
			textBaseline: baseline,
			font: font,
			text: getText(feature, resolution),
			fill: new ol.style.Fill({color: fillColor}),
			stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}),
			offsetX: offsetX,
			offsetY: offsetY,
			rotation: rotation
		});
	};
	
	// 构建图层
	var parkingLayer = new ol.layer.Vector({
		source : ****.vectorSource,
		style : createPolygonStyleFunction(),
		name:'tingchewei'
	});
	
	//获取地图对象
	var map = ****.getMap();
	console.info(parkingLayer);
	//添加图层
	map.addLayer(parkingLayer);
}

转载自：https://blog.csdn.net/longshengguoji/article/details/48379409