1. 先將圖層釋出成geoserver服務

2.具體實現程式碼

var tempUrl = ''  //釋出的wfs圖層

var poi_style = function (feature, zoom) {
			if (zoom > 2000) {
				return points_4_style;
			} else {
				var direction = 0;
				return new ol.style.Style({
					image: new ol.style.Icon({
						src: Path +"/sea/icon/rm.png",
						rotation: direction
					}),
					text: new ol.style.Text({
						//padding:'top 10px',
						offsetY:-30,
						//offsetY:'12px',
						//對齊方式
						textAlign: 'center',
						//文字基線
						textBaseline: 'middle',
						//字型樣式
						font: 'normal 14px 微軟雅黑',
						//文字內容
						text: feature.get('oid'),
						//填充樣式
						fill: new ol.style.Fill({
							color: '#aa3300'
						}),
						//筆觸
						stroke: new ol.style.Stroke({
							color: '#ffcc33',
							width: 2
						})
					})
				});
			}
		};

var point_source = new ol.source.Vector({
			projection: 'EPSG:4326'
		});

var points = new ol.layer.Vector({
			name:'poi',
			source: point_source,
			style: poi_style,
			minZoom: 4,
			width: 2,
			visible: true
		});
//底圖
  var raster = new ol.layer.Tile({
			name:'map',
			maxZoom: 9,
			minZoom: 1,
			visible: true,
			source: new ol.source.XYZ({
				url: 'http://cccpist.55555.io/tiles/gsat/{z}/{x}/{y}.png'
			})
		});

var map = new ol.Map({
			layers:[raster ， points ] ,
			target: document.getElementById('map'),
			view: new ol.View({
				center: [13328108, 2920366],
				maxZoom: 15,
				zoom: 5
			})
		});	

fetch(tempUrl).then(function (response) {
					return response.json();
				}).then(function (json) {
				var features = geoJSON.readFeatures(json);
					point_source.clear();
					if(features.length>0){
						point_source.addFeatures(features);
						map.render();
					}
				}).catch(function (e) {
					console.log(e);
				});