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);
}


相关文章
|
4月前
|
测试技术
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
|
JavaScript 前端开发 定位技术
Leaflet系列:动态勾画polygon
Leaflet如何实现动态勾画polygon
203 0
|
4月前
|
定位技术
ArcGIS中ArcMap创建渔网Create Fishnet:生成指定大小的格网矢量文件
ArcGIS中ArcMap创建渔网Create Fishnet:生成指定大小的格网矢量文件
|
4月前
[Qt5] 矩形、圆和多边形ROI区域的交互(List View列表视图,halcon实现)
[Qt5] 矩形、圆和多边形ROI区域的交互(List View列表视图,halcon实现)
51 0
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系
256 0
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系
|
定位技术
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
Cesium学习教程+笔记(Mars3D) 图层 图层组 矢量数据
openlayers5之聚合分析图层Cluster
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81805524 openlayer...
1703 0
openlayers+geoserver ImageWMS过滤动态刷新图层
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81530249 openlayer...
1803 0
|
定位技术
openlayers4+geoserver wfs实现空间分析、属性查询
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/79500449 openlayers4,geoserver wfs实现空间分析、属性查询 http://www.
1889 0
|
JavaScript 定位技术
基于AGS JS开发自定义贴图图层
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示)。
874 0