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


相关文章
|
人工智能 NoSQL 定位技术
标准地图的矢量模板,ArcGIS可打开
标准地图的矢量模板,ArcGIS可打开
159 0
|
6月前
|
测试技术
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
|
1月前
|
开发框架 前端开发 定位技术
在Mars3d实现cesium的ImageryLayer自定义瓦片的层级与原点
通过上述步骤,您可以成功在Mars3D平台上集成Cesium,并实现自定义瓦片图层的层级与原点配置。这一过程不仅提升了地图应用的定制化程度,也为处理特定数据集和优化用户体验提供了灵活的解决方案。在实际开发过程中,不断测试和微调是确保图层展示效果与性能的关键。
89 0
|
3月前
|
定位技术
Cesium案例解析(九)——Rotatable2DMap旋转2D地图
Cesium案例解析(九)——Rotatable2DMap旋转2D地图
91 0
|
6月前
|
定位技术
ArcGIS中ArcMap栅格图层0值设置为NoData值的简便方法
ArcGIS中ArcMap栅格图层0值设置为NoData值的简便方法
158 1
|
定位技术
在地图上基于OpenLayers实现点/线/面静态的绘制显示
在地图上基于OpenLayers实现点/线/面静态的绘制显示
1097 0
在地图上基于OpenLayers实现点/线/面静态的绘制显示
|
定位技术
openlayers控制地图显示范围
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/83108903 openlaye...
2874 0
|
缓存 定位技术
arcgis添加瓦片图层解决图层加载缓慢问题
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/74036374        为了提高用户浏览地图信息的速度,地图模版创建完成后,需要对地图模版进行发布,然后进行切片处理,即把发布后的地图模版按照一定的比例尺切成地图图片。
1997 0
|
JavaScript 定位技术
基于AGS JS开发自定义贴图图层
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 假设一个景区有多张图片需要在地图上展示,并且随着地图的缩放而缩放(不是单纯的以气泡来展示)。
901 0
|
定位技术
OpenLayers 3 自定义坐标系
地图中坐标系是非常多的,最常用的是EPSG:3857(等于谷歌的900913,等于esri的102100)的web墨卡托投影和GPS的EPSG:4326的WGS84坐标系。
1769 0